Home
Simon Scheffer
Dismissible alert bar

Dismissible alert bar

This tailwind example is contributed by Simon Scheffer, on 01-Mar-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are caution,Toast, Snackbar

Alert Notification

Author Simon Scheffer

9.8k

Fork Fullscreen

<div class="fixed inset-x-0 top-10 pb-2 sm:pb-5 z-50">
    <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div class="rounded-lg bg-indigo-600 p-2 shadow-lg sm:p-3">
            <div class="flex flex-wrap relative items-center justify-between">
                <div class="flex p-2 flex-1 items-center font-medium text-white">
                    Your feedback recived.
                </div>
                <button class="absolute -top-2 -right-2 hover:text-gray-100" onclick="return this.parentNode.parentNode.parentNode.parentNode.remove();">
                    <span class="sr-only">Dismiss</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                        class="h-6 w-6 text-white">
                        <path fill-rule="evenodd"
                            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"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

Related Examples

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

Author:
Code huit

2 years ago

15.6k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

10k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

13.5k
Alert Component

Author:
Conan Hilton

3 years ago

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

Author:
Prajwal Hallale

2 years ago

8k
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

12.9k
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.1k
Notification alert section
Show info, success, or error messages

Author:
Arya

3 years ago

10.6k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

1 year ago

1.9k
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

10 months ago

843
Subcribe Card - Alert - Notification

Author:
ABDO-SY

8 months ago

672
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Author:
Rajesh Maheshwari

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components