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

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

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

Author:
Code huit

2 years ago

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

8 months ago

600
Notification alert section
Show info, success, or error messages

Author:
Arya

3 years ago

10.7k
Toast Notification

Author:
Anonymous

1 year ago

820
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

1 year ago

2.1k
joker
joker cyber punk

Author:
Baraka Salvator

7 months ago

1.2k
Status bar

Author:
Maxim

1 year ago

989
Notification
Dev Community Notification Clone

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

1 year ago

3k
Toast
The best Notfication Toast with Tailwind css

Author:
irahoza daniel

8 months ago

790
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

3 years ago

10.8k
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

1 month ago

131

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components