<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 108
- Banners 73
- Benefits 16
- Blog 132
- Breadcrumbs 24
- Call to action 199
- Cards 29
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- E-commerce (orders) 35
- E-commerce (products) 76
- FAQ 95
- Features 227
- Footers 145
- Forms 9
- Graphs 38
- HTTP codes 107
- Hero section 164
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 29
- Navbar 209
- Navigation (horizontal) 215
- Navigation (vertical) 7
- Newsletter 129
- Notifications 7
- Paginations 12
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 32
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 153
- Tables 75
- Team 117
- Testimonials 144
- 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!
