<section class="py-24 lg:pb-36 bg-white overflow-hidden">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap items-center justify-between -m-2 mb-8">
<div class="w-auto p-2">
<h3 class="text-3xl font-semibold" style="letter-spacing: -0.5px;">Save 10% when you choose Annual Billing:</h3>
</div>
<div class="w-auto p-2">
<a class="flex p-2 border border-gray-300 rounded-full" href="#">
<span class="inline-block px-6 py-2.5 text-white font-medium tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-full transition duration-500">Annual</span>
<span class="px-6 py-2.5 font-medium tracking-tight rounded-full">Annual</span>
</a>
</div>
</div>
<div class="flex flex-wrap -m-8">
<div class="w-full md:w-1/2 p-8">
<div class="p-10 bg-gray-200 rounded-t-lg">
<h4 class="mb-2 text-xl font-semibold tracking-tight">Basic</h4>
<p class="text-xl tracking-tight">Use and re-use tons of responsive sections to main & create the perfect layout.</p>
</div>
<div class="relative px-10 bg-gray-500 rounded-b-lg">
<div class="flex flex-wrap justify-between items-center py-1">
<div class="w-auto p-2">
<h3 class="text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">$49/mo</h3>
</div>
<div class="w-auto p-2">
<p class="text-white font-medium tracking-tight">Billed Yearly</p>
</div>
</div>
</div>
<div class="pt-4 px-10 pb-11 border-l border-r border-b rounded-b-lg">
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Users</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">20</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Bandwidth</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">8GB Per User</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Requests</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">20,000 Per Month</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">API Calls</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">50k</p>
</div>
</div>
</div>
<div class="mb-8 py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Unique Features</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">Unlimited</p>
</div>
</div>
</div>
<a class="inline-block px-5 py-4 w-full text-center hover:text-white font-semibold tracking-tight bg-white hover:bg-gray-700 border border-gray-700 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="p-10 bg-gray-600 rounded-t-lg">
<h4 class="mb-2 text-xl text-white font-semibold tracking-tight">Pro</h4>
<p class="text-xl text-white tracking-tight">Use and re-use tons of responsive sections to main & create the perfect layout.</p>
</div>
<div class="relative px-10 rounded-b-lg" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
<div class="flex flex-wrap justify-between items-center py-1">
<div class="w-auto p-2">
<h3 class="text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">$99/mo</h3>
</div>
<div class="w-auto p-2">
<p class="text-white font-medium tracking-tight">Billed Yearly</p>
</div>
</div>
</div>
<div class="pt-4 px-10 pb-11 border-l border-r border-b rounded-b-lg">
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Users</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">20</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Bandwidth</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">8GB Per User</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Requests</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">20,000 Per Month</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">API Calls</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">50k</p>
</div>
</div>
</div>
<div class="mb-8 py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Unique Features</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">Unlimited</p>
</div>
</div>
</div>
<a class="inline-block px-5 py-4 w-full text-white text-center font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 113
- Banners 76
- Benefits 16
- Blog 143
- Brands 3
- Breadcrumbs 27
- Call to action 227
- Cards 43
- Careers 34
- Contact 117
- Content 90
- Cookies 104
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 65
- E-commerce (products) 101
- Empty state 4
- FAQ 103
- Features 263
- Footers 163
- Forms 9
- Graphs 58
- HTTP codes 119
- Hero section 184
- How it works 135
- Instagram photos 9
- Integrations 8
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 241
- Navigation (vertical) 12
- Newsletter 138
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 141
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Search 3
- Sign in / Sign up 201
- Snackbars 10
- Stats 173
- Steps 12
- Tables 91
- Tabs 2
- Team 122
- Testimonials 160
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
A well-designed price list determines the conversion rate. That's why in Shuffle Editor we give you access to very many variants of thoughtfully designed Tailwind pricing components.
Each Tailwind pricing component variant is a UI library component. We select the best designers to create our libraries, and the code underneath them is created by our in-house development team. Therefore, our libraries meet your needs, allowing you to create complete and functional Tailwind UI templates.
Get access to all Tailwind pricing components, code and our editor. Try the demo for free!
