Advanced Price Table Using Tailwind UI
An Advanced Price Table created with Tailwind offers a sophisticated and visually compelling way to showcase detailed pricing information, making it easier for users to compare and select the most suitable subscription or plan.
price
Loading component...
220 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- inspired design by https://dribbble.com/shots/9913753-Advanced-Price-Table -->
<section>
<div class="container px-5 py-12 mx-auto lg:px-20 space-y-5 bg-[#FEE2D4] my-12">
<div class="flex flex-wrap items-center justify-center w-full bg-white space-x-0 md:space-x-4 ">
<div class="">
<div class="relative flex flex-col h-full py-8 items-center px-2 text-center md:text-left">
<h2 class="text-xl font-bold tracking-widest text-gray-900 uppercase title-font">
Basic
</h2>
</div>
</div>
<div class="hidden xl:block w-0.5 rounded-full h-16 bg-gray-300"></div>
<div class="">
<div
class="relative flex flex-col md:flex-row h-full py-8 px-2 space-x-0 md:space-x-2 space-y-2 md:space-y-0">
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-blue-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Access to All Lectures
</p>
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-red-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Front Seat
</p>
</p>
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-red-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Premium Lunch & Snacks
</p>
</div>
</div>
<div class="hidden xl:block w-0.5 rounded-full h-16 bg-gray-300"></div>
<div class="">
<div
class="relative flex flex-col md:flex-row h-full p-8 space-x-0 md:space-x-4 space-y-2 md:space-y-0">
<h1 class="flex items-center mx-auto text-5xl sm:text-4xl font-black leading-none text-gray-800 ">
$44
</h1>
<button
class="w-full px-4 py-2 mx-auto mt-3 text-blue-800 border border-blue-700 rounded-md text-md hover:bg-blue-700 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 focus:border-blue-700 focus:bg-blue-800 hover:text-blue-200">
Get ticket
</button>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-center w-full bg-white space-x-0 md:space-x-4 ">
<div class="">
<div class="relative flex flex-col h-full py-8 items-center px-2 text-center md:text-left">
<h2 class="text-xl font-bold tracking-widest text-gray-900 uppercase title-font">
Premium
</h2>
</div>
</div>
<div class="hidden xl:block w-0.5 rounded-full h-16 bg-gray-300"></div>
<div class="">
<div
class="relative flex flex-col md:flex-row h-full py-8 px-2 space-x-0 md:space-x-2 space-y-2 md:space-y-0">
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-blue-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Access to All Lectures
</p>
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-blue-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Front Seat
</p>
</p>
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-blue-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Premium Lunch & Snacks
</p>
</div>
</div>
<div class="hidden xl:block w-0.5 rounded-full h-16 bg-gray-300"></div>
<div class="">
<div
class="relative flex flex-col md:flex-row h-full p-8 space-x-0 md:space-x-4 space-y-2 md:space-y-0">
<h1 class="flex items-center mx-auto text-5xl sm:text-4xl font-black leading-none text-gray-800 ">
$99
</h1>
<button
class="w-full px-4 py-2 mx-auto mt-3 text-blue-800 border border-blue-700 rounded-md text-md hover:bg-blue-700 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 focus:border-blue-700 focus:bg-blue-800 hover:text-blue-200">
Get ticket
</button>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-center w-full bg-white space-x-0 md:space-x-4 ">
<div class="">
<div class="relative flex flex-col h-full py-8 items-center px-2 text-center md:text-left">
<h2 class="text-xl font-bold tracking-widest text-gray-900 uppercase title-font">
Standart
</h2>
</div>
</div>
<div class="hidden xl:block w-0.5 rounded-full h-16 bg-gray-300"></div>
<div class="">
<div
class="relative flex flex-col md:flex-row h-full py-8 px-2 space-x-0 md:space-x-2 space-y-2 md:space-y-0">
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-blue-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Access to All Lectures
</p>
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-blue-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Front Seat
</p>
</p>
<p
class="flex items-center text-lg font-normal tracking-wide text-gray-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-red-500 rounded-full bg-blue-1300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
Premium Lunch & Snacks
</p>
</div>
</div>
<div class="hidden xl:block w-0.5 rounded-full h-16 bg-gray-300"></div>
<div class="">
<div
class="relative flex flex-col md:flex-row h-full p-8 space-x-0 md:space-x-4 space-y-2 md:space-y-0">
<h1 class="flex items-center mx-auto text-5xl sm:text-4xl font-black leading-none text-gray-800 ">
$77
</h1>
<button
class="w-full px-4 py-2 mx-auto mt-3 text-blue-800 border border-blue-700 rounded-md text-md hover:bg-blue-700 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 focus:border-blue-700 focus:bg-blue-800 hover:text-blue-200">
Get ticket
</button>
</div>
</div>
</div>
</div>
</section>