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.4k

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

12.6k
Notification - Htmlwind
Simple notification

Author:
Htmlwind

2 months ago

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

Author:
Code huit

2 years ago

15k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.8k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

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

Author:
Rajesh Maheshwari

5 months ago

650
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

2 years ago

7.9k
Notification
Dev Community Notification Clone

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

9 months ago

2.5k
Cookie consent dialog box

Author:
Leif99

2 years ago

14.1k
Product hunt showcase

Author:
Lukas Müller

2 years ago

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

3 months ago

426
Notification badges with count

Author:
Arya

2 years ago

14.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components