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

Notification

Dev Community Notification Clone

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

Sidebar Notification Clone

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

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

2.4k

Fork Fullscreen

<div class="w-full h-full bg-gray-100 dark:bg-gray-900">
  <div class="lg:w-[70%] sm:w-[80%] w-[90%] mx-auto flex flex-col gap-4 py-10">
    <div class="w-full flex justify-between pb-4">
      <h2 class="text-3xl font-semibold dark:text-white">Notifcations</h2>
      <a class="text-lg text-gray-600 font-semibold hover:cursor-pointer hover:text-blue-600 dark:hover:text-blue-500 hover:transition hover:ease-in hover:delay-150 dark:text-gray-400">Settings</a>
    </div>
    <div class="w-full flex sm:flex-row flex-col gap-4">
      <div class="sm:w-1/3 flex flex-col gap-[2px] px-2 dark:text-white">
        <button class="w-full text-left py-2 bg-white dark:bg-gray-800 rounded pl-4 hover:bg-white dark:hover:bg-gray-800">All</button>
        <button class="w-full text-left py-2 rounded pl-4 hover:bg-white dark:hover:bg-gray-800">Comments</button>
        <button class="w-full text-left py-2 rounded pl-4 hover:bg-white dark:hover:bg-gray-800">posts</button>
      </div>
      <div class="w-full flex flex-col gap-4">
        
        <div
          class="w-full flex flex-col gap-2 bg-white dark:bg-gray-800 p-6 rounded-md border-l-[.5rem] border-blue-600">
          
          <div class="flex gap-2">
            <img class="w-[3.3rem] h-[3.3rem] object-cover rounded-full" src="https://images.unsplash.com/photo-1489980557514-251d61e3eeb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxtYW4lMjBpbiUyMHRzaGlydHxlbnwwfDB8fHwxNzM2NDAxNzMwfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="Profile" />
            <div class="flex flex-col">
              <div class="flex gap-2 items-center dark:text-white">
                <h4 class="text-lg font-semibold">Alexander Johnson.</h4>
                <p class="text-sm">made a new post</p>
              </div>
              <p class="text-sm text-gray-500 dark:text-gray-300">about 22 hours ago</p>
            </div>
          </div>
          
          <div class="flex flex-col gap-2 border border-gray-200 dark:border-gray-600 rounded-md ml-10">
            <div class="flex flex-col p-4 hover:cursor-pointer">
              <h4 class="text-lg font-semibold dark:text-white hover:text-blue-800 dark:hover:text-blue-400">Build a static website with Markdown content, using Nuxt and Fusionable
                (server API approach)</h4>
              <p class="text-sm text-gray-500 hover:text-blue-800 dark:hover:text-blue-400 dark:text-gray-300">#nuxt #vue #markdown #tutorial</p>
            </div>

<div class="flex justify-between items-center py-1 border-t-2 dark:border-gray-600 dark:text-white">
              <div class="flex gap-2 text-lg pl-1">
                <div class=" flex items-center gap-1 px-4 py-1 rounded cursor-pointer  hover:bg-gray-200 dark:hover:bg-gray-700">
                  <ion-icon class="text-xl" name="heart-outline"></ion-icon><span class="md:block hidden">Like</span>
                </div>
                <div class=" flex items-center gap-1 px-4 py-1 rounded cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700">
                  <ion-icon class="text-xl" name="bookmark-outline"></ion-icon><span class="md:block hidden">Save</span>
                </div>
              </div>
              <div class="pr-1">
                <div class=" flex items-center gap-1 px-4 py-1 rounded cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700">
                  <ion-icon class="text-xl" name="notifications-outline"></ion-icon><span class="md:block hidden">Subscribe to comments</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div
          class="w-full flex flex-col gap-2 bg-white dark:bg-gray-800 p-6 rounded-md border-l-[.5rem] border-blue-600">
          
          <div class="flex gap-2">
            <img class="w-[3.3rem] h-[3.3rem] object-cover rounded-full" src="https://images.unsplash.com/photo-1485218126466-34e6392ec754?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8bGFkeXxlbnwwfDB8fHwxNzMyMDI1NDIxfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="Profile" />
            <div class="flex flex-col">
              <div class="flex gap-2 items-center dark:text-white">
                <h4 class="text-lg font-semibold">Sophia Rodriguez.</h4>
                <p class="text-sm">made a new post</p>
              </div>
              <p class="text-sm text-gray-500 dark:text-gray-300">about 22 hours ago</p>
            </div>
          </div>
          
          <div class="flex flex-col gap-2 border border-gray-200 dark:border-gray-600 rounded-md ml-10">
            <div class="flex flex-col p-4 hover:cursor-pointer">
              <h4 class="text-lg font-semibold dark:text-white hover:text-blue-800 dark:hover:text-blue-400">Build a static website with Markdown content, using Nuxt and Fusionable
                (server API approach)</h4>
              <p class="text-sm text-gray-500 hover:text-blue-800 dark:hover:text-blue-400 dark:text-gray-300">#nuxt #vue #markdown #tutorial</p>
            </div>

<div class="flex justify-between items-center py-1 border-t-2 dark:border-gray-600 dark:text-white">
              <div class="flex gap-2 text-lg pl-1">
                <div class=" flex items-center gap-1 px-4 py-1 rounded cursor-pointer  hover:bg-gray-200 dark:hover:bg-gray-700">
                  <ion-icon class="text-xl" name="heart-outline"></ion-icon><span class="md:block hidden">Like</span>
                </div>
                <div class=" flex items-center gap-1 px-4 py-1 rounded cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700">
                  <ion-icon class="text-xl" name="bookmark-outline"></ion-icon><span class="md:block hidden">Save</span>
                </div>
              </div>
              <div class="pr-1">
                <div class=" flex items-center gap-1 px-4 py-1 rounded cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700">
                  <ion-icon class="text-xl" name="notifications-outline"></ion-icon><span class="md:block hidden">Subscribe to comments</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div
          class="w-full flex flex-col gap-2 bg-white dark:bg-gray-800 p-6 rounded-md border-l-[.5rem] border-blue-600">
          
          <div class="flex gap-2">
            <img class="w-[3.3rem] h-[3.3rem] object-cover rounded-full" src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8ZGV2ZWxvcGVyJTIwaW1hZ2V8ZW58MHwwfHx8MTczNjQwMTY4Mnww&ixlib=rb-4.0.3&q=80&w=1080" alt="Profile" />
            <div class="flex flex-col">
              <div class="flex gap-2 items-center dark:text-white">
                <h4 class="text-lg font-semibold">Christopher Lee.</h4>
                <p class="text-sm">made a new post</p>
              </div>
              <p class="text-sm text-gray-500 dark:text-gray-300">about 22 hours ago</p>
            </div>
          </div>
          
          <div class="flex flex-col gap-2 border border-gray-200 dark:border-gray-600 rounded-md ml-10">
            <div class="flex flex-col p-4 hover:cursor-pointer">
              <h4 class="text-lg font-semibold dark:text-white hover:text-blue-800 dark:hover:text-blue-400">Build a static website with Markdown content, using Nuxt and Fusionable
                (server API approach)</h4>
              <p class="text-sm text-gray-500 hover:text-blue-800 dark:hover:text-blue-400 dark:text-gray-300">#nuxt #vue #markdown #tutorial</p>
            </div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Related Examples

Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

2 months ago

467
Notification badges with count

Author:
Arya

2 years ago

14.5k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

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

Author:
Diavox Jerome Soriano

5 months ago

303
Simple dialpad

Author:
Brandon D

2 years ago

11k
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

2 years ago

9.6k
Elegant Animated Drawer
Useful Tailwind classes for constructing an animated sidebar drawer that can be controlled via labels. The component itself is pure CSS and does not require JavaScript to use (although this example uses a bit of JS).

Author:
Nick Girga

2 months ago

321
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.4k
Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Author:
Bishnu Thapa

1 year ago

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

Author:
Code huit

1 year ago

14.9k
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

2 years ago

7.9k
Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

12.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components