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

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

1 month ago

304
Google.com search page clone

Author:
Mr Robot

2 years ago

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

Author:
Diavox Jerome Soriano

4 months ago

210
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

1 month ago

348
Product hunt showcase

Author:
Lukas Müller

2 years ago

12k
Notification badges with count

Author:
Arya

2 years ago

14.2k
Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

12.1k
Material 3 Drawer (Responsive) [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines. Static sidebar when the screen is >=lg. Collapses into a drawer when the screen is <lg.

Author:
Nick Girga

4 weeks ago

124
Tailwind Sidebar Layout

Author:
Junior Gauze

7 months ago

1.4k
Notification - Htmlwind
Simple notification

Author:
Htmlwind

3 weeks ago

71
Icon Notification Badge with Count

Author:
Arya

2 years ago

13.6k
GitHub For you Feed
GitHub For you Feed Clone

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

7 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components