w3collective/tailwind-pricing-table.html

## tailwind-pricing-table.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Pricing Table - Tailwind CSS</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container m-auto">
      <div class="flex flex-wrap items-center justify-center w-full text-center">
        <!-- basic plan -->
        <div class="w-full p-4 md:w-1/2 lg:w-1/3">
          <div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
            <div class="py-5 text-blue-700 bg-white">
              <h3>Basic</h3>
              <p class="text-5xl font-bold">
                $19.<span class="text-3xl">95</span>
              </p>
              <p class="text-xs uppercase">Per Month</p>
            </div>
            <div class="py-5 bg-blue-700 text-white rounded-b">
              <p>Feature of the plan</p>
              <p>Another feature plan feature</p>
              <p>Yet another plan feature</p>
              <button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
                Get Started
              </button>
            </div>
          </div>
        </div>
        <!-- standard plan -->
        <div class="w-full p-4 md:w-1/2 lg:w-1/3">
          <div class="flex flex-col rounded">
            <div class="py-7 bg-blue-700 text-white rounded-t">
              <p class="uppercase text-yellow-300 font-extrabold">
                Most Popular
              </p>
              <h3>Standard</h3>
              <p class="text-5xl font-bold">
                $49.<span class="text-3xl">95</span>
              </p>
              <p class="text-xs uppercase">Per Month</p>
            </div>
            <div>
              <div class="pt-1 pb-7 bg-blue-700 text-white rounded-b">
                <p>Feature of the plan</p>
                <p>Another feature plan feature</p>
                <p>Yet another plan feature</p>
                <button class="px-5 py-2 mt-5 uppercase rounded bg-yellow-300 text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
                  Get Started
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- advanced plan -->
        <div class="w-full p-4 md:w-1/2 lg:w-1/3">
          <div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
            <div class="py-5 text-blue-700 bg-white">
              <h3>Advanced</h3>
              <p class="text-5xl font-bold">
                $99.<span class="text-3xl">95</span>
              </p>
              <p class="text-xs uppercase">Per Month</p>
            </div>
            <div class="py-5 bg-blue-700 text-white rounded-b">
              <p>Feature of the plan</p>
              <p>Another feature plan feature</p>
              <p>Yet another plan feature</p>
              <button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
                Get Started
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Responsive Pricing Table - Tailwind CSS</title>
	<link
	href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
	rel="stylesheet"
	/>
	</head>
	<body>
	<div class="container m-auto">
	<div class="flex flex-wrap items-center justify-center w-full text-center">
	<!-- basic plan -->
	<div class="w-full p-4 md:w-1/2 lg:w-1/3">
	<div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
	<div class="py-5 text-blue-700 bg-white">
	<h3>Basic</h3>
	<p class="text-5xl font-bold">
	$19.<span class="text-3xl">95</span>
	</p>
	<p class="text-xs uppercase">Per Month</p>
	</div>
	<div class="py-5 bg-blue-700 text-white rounded-b">
	<p>Feature of the plan</p>
	<p>Another feature plan feature</p>
	<p>Yet another plan feature</p>
	<button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
	Get Started
	</button>
	</div>
	</div>
	</div>
	<!-- standard plan -->
	<div class="w-full p-4 md:w-1/2 lg:w-1/3">
	<div class="flex flex-col rounded">
	<div class="py-7 bg-blue-700 text-white rounded-t">
	<p class="uppercase text-yellow-300 font-extrabold">
	Most Popular
	</p>
	<h3>Standard</h3>
	<p class="text-5xl font-bold">
	$49.<span class="text-3xl">95</span>
	</p>
	<p class="text-xs uppercase">Per Month</p>
	</div>
	<div>
	<div class="pt-1 pb-7 bg-blue-700 text-white rounded-b">
	<p>Feature of the plan</p>
	<p>Another feature plan feature</p>
	<p>Yet another plan feature</p>
	<button class="px-5 py-2 mt-5 uppercase rounded bg-yellow-300 text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
	Get Started
	</button>
	</div>
	</div>
	</div>
	</div>
	<!-- advanced plan -->
	<div class="w-full p-4 md:w-1/2 lg:w-1/3">
	<div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
	<div class="py-5 text-blue-700 bg-white">
	<h3>Advanced</h3>
	<p class="text-5xl font-bold">
	$99.<span class="text-3xl">95</span>
	</p>
	<p class="text-xs uppercase">Per Month</p>
	</div>
	<div class="py-5 bg-blue-700 text-white rounded-b">
	<p>Feature of the plan</p>
	<p>Another feature plan feature</p>
	<p>Yet another plan feature</p>
	<button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
	Get Started
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>