Home
$@(\/)(\/)¥
Notifications

Notifications

This tailwind example is contributed by $@(\/)(\/)¥, on 23-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Toast, Snackbar

Notification

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

3.6k

Fork Fullscreen

<div
        class="md:text-4xl sm:text-3xl text-2xl text-center font-serif font-extrabold border-b-2 dark:border-blue-500 rounded-b-md mb-6 border-yellow-500 text-white dark:text-black">
        Notifications</div>

<div
        class="sm:w-[70%] w-[94%] mx-auto dark:bg-gray-300 bg-gray-700 p-4 rounded-md flex sm:gap-4 gap-2 items-center justify-center">
        <img src="https://lh3.googleusercontent.com/a/ACg8ocIexhmmTS8LcwWo1fPGY5Fl3KXpd-JuBE_Gj56P3rUR2g=s96-c" alt="profile" class="w-[5rem] object-cover h-[5rem] outline outline-2 outline-blue-400 dark:outline-teal-400/20 rounded-full" />
        <div class="w-[80%] flex flex-col gap-1">
            <div class="text-lg font-semibold font-serif text-white dark:text-black">Samuel Abera</div>
            <p class="text-sm dark:text-gray-600 text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Labore reiciendis earum quasi</p>
            <p class="text-[12px] text-semibold dark:text-gray-700 text-gray-400 text-right">a few moments ago</p>
        </div>
    </div>

<div
        class="sm:w-[70%] w-[94%] mx-auto dark:bg-gray-300 bg-gray-700 p-4 rounded-md flex sm:gap-4 gap-2 items-center justify-center">
        <img src="https://images.unsplash.com/photo-1463453091185-61582044d556?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8cGVvcGxlfGVufDB8MHx8fDE3MTExMTEzODd8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="profile" class="w-[5rem] object-cover h-[5rem] outline outline-2 outline-blue-400 dark:outline-sky-700/40 rounded-full" />
        <div class="w-[80%] flex flex-col gap-1">
            <div class="text-lg font-semibold font-serif text-white dark:text-black">Sammy Tg</div>
            <p class="text-sm dark:text-gray-600 text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Labore reiciendis earum quasi</p>
            <p class="text-[12px] text-semibold dark:text-gray-700 text-gray-400 text-right">7 minuts ago</p>
        </div>
    </div>

<div
        class="sm:w-[70%] w-[94%] mx-auto dark:bg-gray-300 bg-gray-700 p-4 rounded-md flex sm:gap-4 gap-2 items-center justify-center">
        <img src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxwZW9wbGV8ZW58MHwwfHx8MTcxMTExMTM4N3ww&ixlib=rb-4.0.3&q=80&w=1080" alt="profile" class="w-[5rem] object-cover h-[5rem] outline outline-2 outline-blue-400 dark:outline-purple-700/30 rounded-full" />
        <div class="w-[80%] flex flex-col gap-1">
            <div class="text-lg font-semibold font-serif text-white dark:text-black">Sammy Ab</div>
            <p class="text-sm dark:text-gray-600 text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Labore reiciendis earum quasi</p>
            <p class="text-[12px] text-semibold dark:text-gray-700 text-gray-400 text-right">2 days ago</p>
        </div>
    </div>
</div>

Related Examples

Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

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

9 months ago

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

Author:
Code huit

2 years ago

15.5k
joker
joker cyber punk

Author:
Baraka Salvator

4 months ago

864
Notification Badge

Author:
Mr Robot

3 years ago

10.3k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

5 months ago

473
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

460
Toast
The best Notfication Toast with Tailwind css

Author:
irahoza daniel

5 months ago

570
Toast
Fully Responsive Toast

Author:
AKASH GANDHAR

1 year ago

2.1k
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Author:
Rajesh Maheshwari

7 months ago

1k
Cookie consent banner

Author:
Leif99

2 years ago

16.8k
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components