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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Source => https://w3collective.com/pricing-table-tailwind-css/