<section class="overflow-hidden">
<div class="bg-black">
<div class="container px-4 mx-auto">
<div class="flex items-center justify-between py-5">
<div class="w-auto">
<div class="flex flex-wrap items-center">
<div class="w-auto pr-2">
<a href="#">
<img src="basko-assets/logos/basko-logo-light.png" alt="">
</a>
</div>
</div>
</div>
<div class="w-auto">
<div class="flex flex-wrap items-center">
<div class="w-auto hidden lg:block">
<ul class="flex items-center mr-8">
<li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
<li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
<li class="mr-8 font-medium text-white hover:text-gray-200 tracking-tight border-r border-gray-700 pr-8"><a href="#">Automation</a></li>
<li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Customer Login</a></li>
</ul>
</div>
<div class="w-auto hidden lg:block">
<div class="inline-block"><a class="inline-block px-5 py-3 text-white font-semibold text-center 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 class="w-auto lg:hidden">
<a href="#">
<svg class="navbar-burger text-indigo-600" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="28" fill="currentColor"></rect>
<path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
<nav class="relative z-10 px-9 pt-8 bg-black h-full overflow-y-auto">
<div class="flex flex-wrap justify-between h-full">
<div class="w-full">
<div class="flex items-center justify-between -m-2">
<div class="w-auto p-2">
<a class="inline-block" href="#">
<img src="basko-assets/logos/basko-logo-light.png" alt="">
</a>
</div>
<div class="w-auto p-2">
<a class="navbar-burger text-white" href="#">
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col justify-center py-16 w-full">
<ul>
<li class="mb-12 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
<li class="mb-12 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
<li class="mb-12 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Automation</a></li>
<li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Customer Login</a></li>
</ul>
</div>
<div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-5 py-3 text-white font-semibold text-center 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>
</nav>
</div>
</div>
<div class="pt-16 lg:pt-32 pb-24 lg:pb-52 bg-black overflow-hidden">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-8">
<div class="w-full md:w-1/2 p-8">
<div class="md:max-w-lg">
<span class="inline-block mb-8 px-3 py-1 text-white font-semibold bg-gray-600 rounded-full">#1 Brand Building Tool</span>
<h1 class="font-heading mb-12 text-6xl md:text-7xl text-white tracking-tighter">Boost brand's visibility and reach fast.</h1>
<div class="flex flex-wrap -m-2 mb-14">
<div class="w-auto p-2"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
<div class="w-auto p-2">
<a class="inline-flex items-center px-5 py-4 bg-transparent hover:bg-indigo-600 border border-gray-600 hover:border-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">
<div class="inline-block">
<svg class="mr-2.5" width="18" height="19" viewbox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.5L3 13.25C3 14.4926 4.00736 15.5 5.25 15.5L12.75 15.5C13.9926 15.5 15 14.4926 15 13.25L15 12.5M12 9.5L9 12.5M9 12.5L6 9.5M9 12.5L9 3.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<span class="text-white font-semibold tracking-tight">Download IOS App</span>
</a>
</div>
</div>
<div class="max-w-md">
<div class="flex flex-wrap -m-1.5">
<div class="w-auto p-1.5">
<div class="flex flex-wrap">
<div class="w-auto">
<img src="basko-assets/images/headers/avatar.png" alt="">
</div>
<div class="w-auto -ml-5">
<img src="basko-assets/images/headers/avatar2.png" alt="">
</div>
<div class="w-auto -ml-5">
<img src="basko-assets/images/headers/avatar3.png" alt="">
</div>
</div>
</div>
<div class="flex-1 p-1.5">
<p class="text-white tracking-tight">Join other 12k+ Marketers and start building brands reputation now.</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<img class="transform hover:-translate-y-2 transition duration-500" src="basko-assets/images/headers/dashboard.png" alt="">
</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
UI Components by Shuffle
Choose from 8070 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.
