<div class="py-8 px-6">
<div class="p-6 bg-indigo-50 border-l-4 border-indigo-500 rounded-r-lg">
<div class="flex items-center">
<h3 class="text-indigo-800 font-medium">Example for Banner</h3>
<button class="ml-auto">
<svg class="text-indigo-800" width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
</svg>
</button>
</div>
</div>
</div>Framework
Tailwind
UI Library
All Libraries
Components
- Alert 80
- Application 51
- Banner 20
- Blog 70
- Call to action 118
- Contact 53
- Content 53
- Cookies 56
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 57
- Features 118
- Footers 75
- Graphs 19
- HTTP codes 44
- Headers 98
- How it works 78
- Logo clouds 91
- Modals 2
- Navbar 44
- Navigation (horizontal) 128
- Navigation (vertical) 2
- Newsletter 67
- Portfolio 71
- Pricing 68
- Reviews 10
- Sign in / Sign up 78
- Stats 83
- Tables 54
- Team 60
- Testimonials 68
- Users 17
Component #1
Alerts are used to draw users' attention to a specific event. Therefore, they must properly stand out from the normal layout of the site. Tailwind component alerts serve exactly this purpose, standing out with the chosen theme.
Browse and choose one variant from Tailwind components alerts. They are UI library components created by our talented designers and coded by our development team.
Buy a subscription to get access to the drag and drop editor, all UI libraries and code under each component.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
