Notifications

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

Notification

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

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

Tailwind v3.4 4.2k 13

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

Prashant

3 years ago

13.8k
NOTIFICATION
This code can serve as a boiler-plate for a notification for an application

NUNNA VIJAYA KRISHNA

7 months ago

1.1k
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Sedat Kumcu

1 year ago

2.6k
Icon Notification Badge with Count

Anonymous

3 months ago

229
Toast
Fully Responsive Toast

AKASH GANDHAR

2 years ago

2.8k
Snackbar with button
Show and close snackbar on button click with default timeout

Amit Pachange

2 years ago

11.2k
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

9 months ago

603
Notification badges with count

Arya

3 years ago

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

Code huit

3 years ago

16.6k
Centre de Notifications
Centre de Notifications

Omer fils ELENGA

6 months ago

651
Commentaires simple
Commentaires

Omer fils ELENGA

6 months ago

691