<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
All Frameworks
UI Library
All Libraries
Components
- About us 5
- Advanced inputs 18
- Alert 356
- Application 236
- Banners 106
- Benefits 16
- Blog 305
- Brands 3
- Breadcrumbs 31
- Call to action 445
- Cards 43
- Careers 50
- Contact 210
- Content 226
- Cookies 205
- Dashboards 13
- Download 10
- Dropdowns 4
- E-commerce (orders) 93
- E-commerce (products) 145
- Empty state 4
- FAQ 203
- Features 570
- Footers 292
- Forms 9
- Gallery 5
- Graph tiles 3
- Graphs 93
- HTTP codes 233
- Hero section 392
- How it works 237
- Instagram photos 9
- Integrations 8
- Logo clouds 353
- Modals 48
- Navbar 325
- Navigation (horizontal) 468
- Navigation (vertical) 32
- Newsletter 236
- Notifications 11
- Paginations 16
- Portfolio 184
- Pricing 245
- Product info 5
- Projects 26
- Reviews 46
- Rich text 6
- Search 3
- Services 5
- Sign in / Sign up 373
- Snackbars 10
- Stats 325
- Steps 12
- Tables 195
- Tabs 2
- Team 221
- Testimonials 272
- Toasts 6
- Users 67
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Pricing Components by Shuffle
Choose from 245 variations of Pricing UI components. Presented here are variants available in various UI libraries.
Get access to all UI components, code, and our visual editor. Try the demo for free!
