<section class="pt-20 pb-24 2xl:py-40 bg-gray-800">
<div class="container mx-auto px-4">
<div class="mb-16 md:mb-24 text-center">
<h2 class="mb-8 md:mb-14 text-5xl lg:text-6xl 2xl:text-7xl text-white font-bold font-heading">Choose a plan</h2>
<p class="text-lg text-gray-200">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="max-w-6xl mx-auto">
<div class="flex flex-wrap items-center -mx-3">
<div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
<div class="px-12 py-16 bg-gray-500 rounded-3xl">
<div class="pb-8 mb-14 border-b border-gray-400">
<div class="flex justify-between items-center px-3">
<h3 class="text-4xl text-white font-bold font-heading">Free</h3>
<p class="text-lg text-white font-bold">$0,00</p>
</div>
</div>
<ul class="text-lg text-white mb-16">
<li class="flex items-center mb-8">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>Complete files</span>
</li>
<li class="flex items-center mb-8">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>10GB cloud storage</span>
</li>
<li class="flex items-center">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>5 team members</span>
</li>
</ul>
<div class="text-center"><a class="inline-block px-10 py-4 border border-gray-200 hover:border-gray-100 rounded-full font-bold text-white" href="#">Try free</a></div>
</div>
</div>
<div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
<div class="px-12 py-16 bg-blue-500 rounded-3xl">
<div class="pb-8 mb-14 border-b border-blueGray-300">
<div class="flex justify-between items-center px-3">
<h3 class="text-4xl text-white font-bold font-heading">Team</h3>
<p class="text-lg text-white font-bold">$9,99</p>
</div>
</div>
<ul class="text-lg text-white mb-16">
<li class="flex items-center mb-8">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>Complete files</span>
</li>
<li class="flex items-center mb-8">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>100GB cloud storage</span>
</li>
<li class="flex items-center mb-8">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>20 team members</span>
</li>
<li class="flex items-center mb-8">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>Unlimited anonymous board editors</span>
</li>
<li class="flex items-center">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>10GB cloud storage</span>
</li>
</ul>
<div class="text-center"><a class="inline-block px-10 py-4 border border-blueGray-300 hover:border-blueGray-100 rounded-full font-bold text-white" href="#">Buy now</a></div>
</div>
</div>
<div class="w-full lg:w-1/3 px-3">
<div class="px-12 py-16 bg-gray-500 rounded-3xl">
<div class="pb-8 mb-14 border-b border-gray-400">
<div class="flex justify-between items-center px-3">
<h3 class="text-4xl text-white font-bold font-heading">Premium</h3>
<p class="text-lg text-white font-bold">$29,99</p>
</div>
</div>
<ul class="text-lg text-white mb-16">
<li class="flex items-center mb-8">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>Complete files</span>
</li>
<li class="flex items-center mb-8">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>20GB cloud storage</span>
</li>
<li class="flex items-center">
<span class="mr-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
</span>
<span>200+ team members</span>
</li>
</ul>
<div class="text-center"><a class="inline-block px-10 py-4 border border-gray-200 hover:border-gray-100 rounded-full font-bold text-white" href="#">Buy now</a></div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
All Frameworks
UI Library
All Libraries
Components
- Alert 85
- Application 127
- Banner 25
- Blog 169
- Call to action 273
- Contact 102
- Content 14
- Content 136
- Cookies 115
- E-commerce (orders) 42
- E-commerce (products) 68
- FAQ 117
- Features 335
- Footer 135
- Footers 10
- Graphs 18
- HTTP codes 109
- Headers 236
- How it works 140
- Logo clouds 194
- Modals 9
- Navbar 68
- Navigation (horizontal) 254
- Navigation (vertical) 10
- Newsletter 123
- Portfolio 131
- Pricing 124
- Projects 9
- Reviews 15
- Sign in / Sign up 184
- Stats 112
- Ta general tables 7
- Tables 57
- Team 111
- Testimonials 130
- Users 25
UI Components by Shuffle
Choose from 3819 of ready-made UI components available in Shuffle Editor. They are divided into 20+ UI libraries created by experienced designers. Each of them presents a unique style that will allow you to build a fantastic website.
By subscribing to the editor, you get access to all of them.
The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.
Component #1
