<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 245
- Application 161
- Applications 5
- Banner 45
- Blog 209
- Call to action 322
- Careers 20
- Contact 133
- Contacts 5
- Content 178
- Cookies 155
- E-commerce (orders) 56
- E-commerce (products) 93
- FAQ 136
- Features 406
- Footers 189
- Gallery 5
- Graphs 46
- HTTP codes 158
- Headers 280
- How it works 173
- Logo clouds 246
- Modals 15
- Navbar 140
- Navigation (horizontal) 310
- Navigation (vertical) 18
- Navigations 4
- Newsletter 163
- Portfolio 150
- Pricing 162
- Projects 9
- Reviews 20
- Rich text 3
- Sign in / Sign up 238
- Stats 219
- Tables 5
- Tables 132
- Team 150
- Testimonials 183
- Users 59
Component #1
UI Components by Shuffle
Choose from 5246 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 #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
