In this tutorial, we will create pricing table ui, mobile responsive pricing table section, pricing table with heroicons icon, examples with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Simple responsive pricing table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Pricing Table Section </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="mx-12 space-y-12 lg:space-y-0 lg:flex lg:gap-4 lg:items-center lg:justify-center">
<div class="max-w-sm p-8 shadow-lg">
<h3 class="text-2xl text-center">Free Trial</h3>
<p class="text-center">$ 0</p>
<div>
<ul class="space-y-4 list-disc">
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
</ul>
<div class="flex items-center justify-center mt-4">
<button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
</div>
</div>
</div>
<div class="max-w-sm p-8 shadow-lg text">
<h3 class="text-2xl text-center">Basic Plan</h3>
<p class="text-center">$ 35</p>
<div>
<ul class="space-y-4 list-disc">
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
</ul>
<div class="flex items-center justify-center mt-4">
<button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
</div>
</div>
</div>
<div class="max-w-sm p-8 shadow-lg text">
<h3 class="text-2xl text-center">Premium Plan</h3>
<p class="text-center">$ 50</p>
<div>
<ul class="space-y-4 list-disc">
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
</ul>
<div class="flex items-center justify-center mt-4">
<button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
</div>
</div>
</div>
</div>
</body>
</html>
tailwind price table v1
Example 2
Pricing table with border style, background style and heroicons icon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Pricing Table Section </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="mx-12 space-y-12 lg:space-y-0 lg:flex lg:gap-4 lg:items-center lg:justify-center">
<div class="max-w-sm p-8 border-t-4 border-indigo-600 rounded shadow-lg">
<h3 class="text-2xl text-center">Free Trial</h3>
<p class="text-center">$ 0</p>
<div>
<ul class="space-y-4 list-disc">
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
</ul>
<div class="flex items-center justify-center mt-4">
<button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
</div>
</div>
</div>
<div class="max-w-sm p-8 text-white bg-indigo-500 shadow-lg">
<h3 class="text-2xl text-center">Basic Plan</h3>
<p class="text-center">$ 35</p>
<div>
<ul class="space-y-4 list-disc">
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
<li>
Lorem ipsum dolor sit amet consectetu
</li>
</ul>
<div class="flex items-center justify-center mt-4">
<button
class="w-full px-2 py-2 text-indigo-900 bg-white rounded hover:bg-indigo-400 hover:text-white">Get
Started</button>
</div>
</div>
</div>
<div class="max-w-sm p-8 shadow-lg ">
<h3 class="text-2xl text-center">Premium Plan</h3>
<p class="text-center">$ 50</p>
<div>
<ul class="space-y-4">
<li class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 mr-2 text-sm text-green-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorem ipsum dolor sit amet consectetu
</li>
<li class="flex items-center text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-indigo-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
Lorem ipsum dolor sit amet consectetu
</li>
<li class="flex items-center text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-red-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorem ipsum dolor sit amet consectetu
</li>
<li class="flex items-center text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
Lorem ipsum dolor sit amet consectetu
</li>
</ul>
<div class="flex items-center justify-center mt-4">
<button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
</div>
</div>
</div>
</div>
</body>
</html>
tailwind price table v2
