<section class="py-4 overflow-hidden">
<div class="container px-4 mx-auto">
<ul class="inline-flex flex-wrap items-center -m-4">
<li class="p-4"><a class="group flex items-center text-sm text-neutral-600 font-medium" href="#">
<svg class="mr-2" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75 15.75H3C3 16.1642 3.33579 16.5 3.75 16.5V15.75ZM14.25 15.75V16.5C14.6642 16.5 15 16.1642 15 15.75H14.25ZM11.25 5.25C11.25 6.49264 10.2426 7.5 9 7.5V9C11.0711 9 12.75 7.32107 12.75 5.25H11.25ZM9 7.5C7.75736 7.5 6.75 6.49264 6.75 5.25H5.25C5.25 7.32107 6.92893 9 9 9V7.5ZM6.75 5.25C6.75 4.00736 7.75736 3 9 3V1.5C6.92893 1.5 5.25 3.17893 5.25 5.25H6.75ZM9 3C10.2426 3 11.25 4.00736 11.25 5.25H12.75C12.75 3.17893 11.0711 1.5 9 1.5V3ZM4.5 15.75C4.5 13.2647 6.51472 11.25 9 11.25V9.75C5.68629 9.75 3 12.4363 3 15.75H4.5ZM9 11.25C11.4853 11.25 13.5 13.2647 13.5 15.75H15C15 12.4363 12.3137 9.75 9 9.75V11.25ZM3.75 16.5H14.25V15H3.75V16.5Z" fill="currentColor"></path>
</svg><span>My Account</span></a></li>
<li class="p-4"><a class="group flex items-center text-sm text-neutral-400 hover:text-neutral-600 font-medium" href="#">
<svg class="mr-2 text-neutral-300 group-hover:text-neutral-600" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6H12.75ZM11.25 12C11.25 12.4142 11.5858 12.75 12 12.75C12.4142 12.75 12.75 12.4142 12.75 12H11.25ZM9.75 8.25C9.75 7.83579 9.41421 7.5 9 7.5C8.58579 7.5 8.25 7.83579 8.25 8.25H9.75ZM8.25 12C8.25 12.4142 8.58579 12.75 9 12.75C9.41421 12.75 9.75 12.4142 9.75 12H8.25ZM6.75 10.5C6.75 10.0858 6.41421 9.75 6 9.75C5.58579 9.75 5.25 10.0858 5.25 10.5H6.75ZM5.25 12C5.25 12.4142 5.58579 12.75 6 12.75C6.41421 12.75 6.75 12.4142 6.75 12H5.25ZM4.5 3.75H13.5V2.25H4.5V3.75ZM14.25 4.5V13.5H15.75V4.5H14.25ZM13.5 14.25H4.5V15.75H13.5V14.25ZM3.75 13.5V4.5H2.25V13.5H3.75ZM4.5 14.25C4.08579 14.25 3.75 13.9142 3.75 13.5H2.25C2.25 14.7426 3.25736 15.75 4.5 15.75V14.25ZM14.25 13.5C14.25 13.9142 13.9142 14.25 13.5 14.25V15.75C14.7426 15.75 15.75 14.7426 15.75 13.5H14.25ZM13.5 3.75C13.9142 3.75 14.25 4.08579 14.25 4.5H15.75C15.75 3.25736 14.7426 2.25 13.5 2.25V3.75ZM4.5 2.25C3.25736 2.25 2.25 3.25736 2.25 4.5H3.75C3.75 4.08579 4.08579 3.75 4.5 3.75V2.25ZM11.25 6V12H12.75V6H11.25ZM8.25 8.25V12H9.75V8.25H8.25ZM5.25 10.5V12H6.75V10.5H5.25Z" fill="currentColor"></path>
</svg><span>Licenses</span></a></li>
<li class="p-4"><a class="group flex items-center text-sm text-neutral-400 hover:text-neutral-600 font-medium" href="#">
<svg class="mr-2 text-neutral-300 group-hover:text-neutral-600" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75 6H14.25M3.75 6C2.92157 6 2.25 5.32843 2.25 4.5C2.25 3.67157 2.92157 3 3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5C15.75 5.32843 15.0784 6 14.25 6M3.75 6L3.75 13.5C3.75 14.3284 4.42157 15 5.25 15H12.75C13.5784 15 14.25 14.3284 14.25 13.5V6M7.5 9H10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg><span>Products</span></a></li>
<li class="p-4"><a class="group flex items-center text-sm text-neutral-400 hover:text-neutral-600 font-medium" href="#">
<svg class="mr-2 text-neutral-300 group-hover:text-neutral-600" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.25 6.75C1.83579 6.75 1.5 7.08579 1.5 7.5C1.5 7.91421 1.83579 8.25 2.25 8.25V6.75ZM15.75 8.25C16.1642 8.25 16.5 7.91421 16.5 7.5C16.5 7.08579 16.1642 6.75 15.75 6.75V8.25ZM5.25 10.5C4.83579 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.83579 12 5.25 12V10.5ZM6 12C6.41421 12 6.75 11.6642 6.75 11.25C6.75 10.8358 6.41421 10.5 6 10.5V12ZM9 10.5C8.58579 10.5 8.25 10.8358 8.25 11.25C8.25 11.6642 8.58579 12 9 12V10.5ZM9.75 12C10.1642 12 10.5 11.6642 10.5 11.25C10.5 10.8358 10.1642 10.5 9.75 10.5V12ZM4.5 4.5H13.5V3H4.5V4.5ZM15 6V12H16.5V6H15ZM13.5 13.5H4.5V15H13.5V13.5ZM3 12V6H1.5V12H3ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12H1.5C1.5 13.6569 2.84315 15 4.5 15V13.5ZM15 12C15 12.8284 14.3284 13.5 13.5 13.5V15C15.1569 15 16.5 13.6569 16.5 12H15ZM13.5 4.5C14.3284 4.5 15 5.17157 15 6H16.5C16.5 4.34315 15.1569 3 13.5 3V4.5ZM4.5 3C2.84315 3 1.5 4.34315 1.5 6H3C3 5.17157 3.67157 4.5 4.5 4.5V3ZM2.25 8.25H15.75V6.75H2.25V8.25ZM5.25 12H6V10.5H5.25V12ZM9 12H9.75V10.5H9V12Z" fill="currentColor"></path>
</svg><span>Transactions</span></a></li>
</ul>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 108
- Banners 76
- Benefits 16
- Blog 132
- Breadcrumbs 27
- Call to action 207
- Cards 43
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 59
- E-commerce (products) 101
- Empty state 4
- FAQ 95
- Features 236
- Footers 150
- Forms 9
- Graphs 58
- HTTP codes 107
- Hero section 169
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 227
- Navigation (vertical) 12
- Newsletter 129
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 159
- Steps 7
- Steps 5
- Tables 91
- Tabs 2
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Tabs Components by Shuffle
Choose from 2 variations of Tailwind application components. Presented here are variants available in various UI libraries.
Get access to all Tailwind application components, code and our visual editor. Try the demo for free!
