Skip to content

Instantly share code, notes, and snippets.

@w3collective
Last active March 17, 2022 13:48
Show Gist options
  • Save w3collective/7e7c89635fd932e5dae470b3516c1a99 to your computer and use it in GitHub Desktop.
Save w3collective/7e7c89635fd932e5dae470b3516c1a99 to your computer and use it in GitHub Desktop.
Responsive pricing table with Tailwind CSS
<!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>
@w3collective
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment