<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 CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 106
- Application 108
- Banners 76
- Benefits 16
- Blog 132
- Breadcrumbs 27
- Call to action 199
- Cards 43
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 35
- E-commerce (products) 76
- Empty state 4
- FAQ 95
- Features 227
- Footers 145
- Forms 9
- Graphs 58
- HTTP codes 107
- Hero section 164
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 219
- Navigation (vertical) 12
- Newsletter 129
- Notifications 11
- Paginations 12
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 32
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 159
- Steps 7
- Tables 91
- Tabs 2
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
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.
