<section class="relative py-36 bg-blueGray-50 overflow-hidden">
<img class="absolute top-1/2 right-0 transform -translate-y-1/2" src="flaro-assets/images/pricing/gradient.svg" alt="">
<div class="relative z-10 container px-4 mx-auto">
<div class="flex flex-wrap lg:items-center -m-8">
<div class="w-full md:w-1/2 p-8">
<div class="md:max-w-md">
<h2 class="mb-16 lg:mb-52 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Pick a plan</h2>
<h3 class="mb-6 text-lg text-gray-900 font-semibold leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</h3>
<p class="font-medium text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="md:max-w-md mx-auto overflow-hidden rounded-3xl shadow-8xl">
<div class="p-9">
<span class="mb-7 inline-block text-sm text-gray-500 font-semibold uppercase tracking-px">Features included:</span>
<ul>
<li class="mb-4 flex items-center">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="font-semibold leading-normal">3 Team Members</p>
</li>
<li class="mb-4 flex items-center">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="font-semibold leading-normal">1200+ UI Blocks</p>
</li>
<li class="mb-4 flex items-center">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="font-semibold leading-normal">10 GB Cloud Storage</p>
</li>
<li class="mb-4 flex items-center">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="font-semibold leading-normal">Individual Email Account</p>
</li>
<li class="flex items-center">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="font-semibold leading-normal">Premium Support</p>
</li>
</ul>
</div>
<div class="p-9 bg-white">
<div class="flex flex-wrap -m-8">
<div class="w-full sm:w-1/2 p-8">
<span class="mb-2 inline-block text-sm text-gray-500 font-semibold uppercase tracking-px">Pro Package</span>
<p class="text-gray-900 font-semibold leading-normal">Best for Startups & Small Businesses</p>
</div>
<div class="w-full sm:w-1/2 p-8">
<div class="sm:max-w-max ml-auto">
<p class="font-bold">
<span class="text-5xl leading-tight tracking-px-n">$49</span>
<span class="text-lg text-gray-500 leading-snug tracking-px-n">/mo</span>
</p>
<p class="font-medium text-gray-500 leading-relaxed">Billed anually</p>
</div>
</div>
</div>
<div class="mt-9">
<button class="py-4 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Start 14 days free trial</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 103
- Banners 37
- Blog 122
- Call to action 189
- Cards 29
- Careers 28
- Contact 96
- Content 80
- Cookies 92
- Dashboards 13
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 86
- Features 215
- Footers 123
- Forms 9
- Graphs 38
- HTTP codes 98
- Hero section 144
- How it works 121
- Logo clouds 150
- Modals 29
- Navbar 209
- Navigation (horizontal) 202
- Navigation (vertical) 7
- Newsletter 104
- Notifications 7
- Paginations 12
- Portfolio 87
- Pricing 119
- Projects 6
- Reviews 10
- Rich text 3
- Sign in / Sign up 155
- Snackbars 10
- Stats 144
- Tables 70
- Team 108
- Testimonials 139
- Users 17
Component #1
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!
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
