Notification

Dev Community Notification Clone

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

Sidebar Notification Clone

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

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

Tailwind v3.4 3.8k 6

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.

Rajesh Pandey

1 year ago

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

Amit Pachange

2 years ago

11.2k
Tailwind Sidebar Layout

nejaa badr

2 years ago

9.2k
Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

2 months ago

252
Material 3 Drawer [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines

Nick Girga

1 year ago

1.1k
Responsive Sidebar
Fully Responsive sidebar in both color modes light & dark with mini bar too.

AKASH GANDHAR

2 years ago

10.8k
Twitter tweet clone
Replica of twitter tweet card

Sophia Baker

3 years ago

10.4k
Sticky Navbar
A modern, feature-rich, and fully responsive navigation bar built with Tailwind CSS. This premium navbar includes a top contact bar, multi-level mega menus, live search with suggestions, mobile drawer navigation, nested accordion menus, authentication buttons, sticky header, and smooth interactions. Perfect for SaaS, corporate, startup, agency, eCommerce, legal, education, and business websites.

JUGENDRA GANGWAR

2 months ago

188
Icon Notification Badge with Count

Anonymous

3 months ago

228
sidebar
This sidebar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

nejaa badr

1 year ago

5k
Ticket
Sirve para ticket

ANGEL EMILIANO MARQUEZ VAZQUEZ

1 year ago

2.4k
Linkedin Post

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

2 years ago

5.4k