Home
Arya
Notification alert section

Notification alert section

Show info, success, or error messages

This tailwind example is contributed by Arya, on 08-Aug-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are caution,Toast, Snackbar

Alert Notification

Author Arya

9.5k

Fork Fullscreen

<div class="bg-white-300 flex p-4 m-10 gap-3 items-center justify-center rounded-2xl border border-blue-600 ">
    <svg class="h-6 w-6 fill-current text-blue-600" viewBox="0 0 448 512">
        <path
            d="M256 32V49.88C328.5 61.39 384 124.2 384 200V233.4C384 278.8 399.5 322.9 427.8 358.4L442.7 377C448.5 384.2 449.6 394.1 445.6 402.4C441.6 410.7 433.2 416 424 416H24C14.77 416 6.365 410.7 2.369 402.4C-1.628 394.1-.504 384.2 5.26 377L20.17 358.4C48.54 322.9 64 278.8 64 233.4V200C64 124.2 119.5 61.39 192 49.88V32C192 14.33 206.3 0 224 0C241.7 0 256 14.33 256 32V32zM216 96C158.6 96 112 142.6 112 200V233.4C112 281.3 98.12 328 72.31 368H375.7C349.9 328 336 281.3 336 233.4V200C336 142.6 289.4 96 232 96H216zM288 448C288 464.1 281.3 481.3 269.3 493.3C257.3 505.3 240.1 512 224 512C207 512 190.7 505.3 178.7 493.3C166.7 481.3 160 464.1 160 448H288z" />
    </svg>
    <div class="ml-3 font-sans text-xs leading-6 text-blue-600">
        Message
    </div>
    <button type="button"
		class="ml-auto inline-flex h-5 w-5 rounded-full border border-blue-600 p-0.5 text-blue-600"
		aria-label="Close">
		<svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
			<path
				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z">
			</path>
		</svg>
	</button>
</div>

Related Examples

Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

1 year ago

12.5k
Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

11.1k
Notification badges with count

Author:
Arya

2 years ago

12.9k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.1k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

2 years ago

12.1k
Dismissible alert bar

Author:
Simon Scheffer

1 year ago

9.2k
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

1 year ago

7.6k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

2 months ago

572
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 week ago

120
Cookie consent dialog box

Author:
Leif99

1 year ago

13.5k
404 Page
The 404 Page is a responsive and customizable error page designed to inform users when they’ve reached a nonexistent or broken link. This component not only improves user experience but also provides a chance to showcase creativity and guide users back to the right path. Key Features: Fully responsive design that works on all devices. Engaging visuals (customizable images, icons, or animations). Includes a message like "Page Not Found" or "Oops! Something went wrong." Provides helpful navigation options such as a "Go Home" button or links to other pages. Easily customizable for themes, styles, and content.

Author:
Abhiraj

1 week ago

122
Fixed alert
fixed top right alert

Author:
Conan Hilton

2 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components