<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<div class="pt-5 bg-gray-900" id="pricing">
<div class="mx-auto pb-20 mt-4 max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h1 class="text-base font-semibold leading-7 text-indigo-400">Pricing</h1>
<p class="mt-2 text-4xl font-bold tracking-tight text-white sm:text-5xl">Whether it's just you, or your entire
team - we've got you covered.</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-300">Choose the product that works best</p>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<!-- First Product -->
<div class="ring-1 ring-white/10 rounded-3xl p-8 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h2 id="product1" class="text-lg font-semibold leading-8 text-white">Product Type 1</h2>
</div>
<p class="mt-4 text-sm leading-6 text-gray-300">Product details for Product Type 1</p>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-4xl font-bold tracking-tight text-white">€ 10 / unit</span><span class="text-sm font-semibold leading-6 text-gray-300"></span>
</p>
<a href="/order" aria-describedby="product1"
class="bg-white/10 text-white hover:bg-white/20 focus-visible:outline-white mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Order
Now</a>
<ul role="list" class="mt-8 space-y-3 text-sm leading-6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>40 units</li>
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>1 feature</li>
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>Fast delivery</li>
</ul>
</div>
<!-- Second Product -->
<div class="bg-white/5 ring-2 ring-indigo-500 rounded-3xl p-8 xl:p-10">
<div class="flex items-baseline justify-between gap-x-4">
<h2 id="product2" class="text-lg font-semibold leading-8 text-white">Product Type 2</h2>
<p class="rounded-full bg-indigo-500 px-2.5 py-1 text-xs font-semibold leading-5 text-white">Most popular</p>
</div>
<p class="mt-4 text-sm leading-6 text-gray-300">The most popular choice. Product details for Product Type 2</p>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-4xl font-bold tracking-tight text-white">€ 20 / unit</span><span class="text-sm font-semibold leading-6 text-gray-300"></span>
</p>
<a href="/order" aria-describedby="product2"
class="bg-indigo-500 text-white shadow-sm hover:bg-indigo-400 focus-visible:outline-indigo-500 mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Order
Now</a>
<ul role="list" class="mt-8 space-y-3 text-sm leading-6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>120 units</li>
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>3 different features</li>
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>Fast delivery</li>
</ul>
</div>
<!-- Third Product -->
<div class="ring-1 ring-white/10 rounded-3xl p-8 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h2 id="product3" class="text-lg font-semibold leading-8 text-white">Product Type 3</h2>
</div>
<p class="mt-4 text-sm leading-6 text-gray-300">Product details for Product Type 3</p>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-4xl font-bold tracking-tight text-white">€ 50 / unit</span><span class="text-sm font-semibold leading-6 text-gray-300"></span>
</p>
<a href="/order" aria-describedby="product3"
class="bg-white/10 text-white hover:bg-white/20 focus-visible:outline-white mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Order
Now</a>
<ul role="list" class="mt-8 space-y-3 text-sm leading-6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>240 units</li>
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>6 different features</li>
<li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" class="h-6 w-5 flex-none text-white">
<path fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"></path>
</svg>Fast delivery</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {}
}
}
</script>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet provides a clean and visually appealing set of responsive pricing tables. It offers a flexible and customizable way to present different pricing plans on your website, making it easy for users to compare and choose the best option for their needs. The tables are designed to adapt seamlessly to various screen sizes, ensuring a consistent user experience across devices.
Key Features:
- Responsive Design: The pricing tables automatically adjust their layout to fit different screen sizes, providing a great user experience on desktops, tablets, and mobile devices.
- Clear and Concise Presentation: The tables are designed to present pricing information in a clear and concise manner, making it easy for users to understand the different plans and features.
- Lightweight and Efficient: The code is optimized for performance, ensuring fast loading times and a smooth user experience.
Implementation:
- Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the pricing tables, including the container, table rows, and columns.
- Customize as Needed: Modify the Tailwind CSS classes and HTML structure to customize the appearance and content of the pricing tables according to your specific requirements.
Interactive Navbar with Sliding Active Indicator with CSS and JS
Responsive Tailwind CSS SaaS Hero with Theme Switcher
Bootstrap 5 Hero Section with Lottie Animation Integration
Creative CSS Intro Text Reveal Animation with No JS
Tailwind CSS Hero Section with Dual CTA Buttons and Prominent Image
Bootstrap 4 Pricing Cards with Monthly and Yearly Options
Responsive CSS Only Smooth Sliding Tab Transitions
Tailwind CSS Subscription Section for Services & Plans
Responsive Bootstrap 5 Contact Form with Image Preview and Map
Modern CSS Only Loading Spinners Collection
Modern Tailwind CSS Hero Section with Promo and Dual Buttons
Clean Bootstrap 5 Contact Form and Contact Details Layout
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
