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

Notifications

This tailwind example is contributed by $@(\/)(\/)Y, 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

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

Author $@(\/)(\/)Y

3.1k

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

2 years ago

12k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

9.6k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

2 years ago

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

Author:
Rajesh Maheshwari

3 months ago

460
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

1 week ago

50
Snackbar with button
Show and close snackbar on button click with default timeout

Author:
Amit Pachange

1 year ago

9.8k
Toast Notification

Author:
Anonymous

4 months ago

257
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

6 months ago

1.2k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

3 months ago

159
Cookie consent banner

Author:
Leif99

2 years ago

16.1k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.5k
Toast
Fully Responsive Toast

Author:
AKASH GANDHAR

10 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components