Home
Samuel Abera
Notification

Notification

Dev Community Notification Clone

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

Fork Fullscreen

<div class="w-full h-full bg-gray-100 dark:bg-gray-900">
  <div class="lg:w-[60%] 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>
      <p class="text-lg text-gray-600 hover:cursor-pointer dark:text-gray-400">Settings</p>
    </div>
    <div class="w-full flex sm:flex-row flex-col gap-4">
      <div class="sm:w-[30%] 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-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">Hewan D.</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">Hewan D.</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">Hewan D.</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

Tailwind Sidebar Layout

Author:
Junior Gauze

2 weeks ago

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

Author:
AKASH GANDHAR

4 months ago

2.7k
Sidebar
This HTML file includes: 1. A responsive sidebar with 3D animation effects: 1. The sidebar slides in and out smoothly. 2. Navigation items have a 3D hover effect using CSS transforms and transitions. 2. Tailwind CSS for styling: 1. Included via CDN for easy setup. 2. Used for layout, colors, and basic styling. 3. Custom CSS for animations and 3D effects: 1. Keyframe animations for sidebar open/close. 2. 3D transform effects for nav items. 4. JavaScript for interactivity: 1. Toggles the sidebar open and close. 2. Adds 3D effect to nav items on hover using mouse position. 3. Closes the sidebar when clicking outside. 5. Accessibility features: 1. ARIA label for the toggle button. 2. Keyboard navigation support (Enter/Space to toggle sidebar). 3. Focus trapping within the sidebar when open. 6. Responsive design: 1. The sidebar is full-height and toggleable, suitable for both desktop and mobile views. This implementation provides a visually appealing sidebar with 3D animations and effects, while maintaining accessibility and responsiveness. It uses HTML for structure, Tailwind CSS for styling, and vanilla JavaScript for interactivity, as requested.

Author:
nejaa badr

2 weeks ago

168
Toast
Fully Responsive Toast

Author:
AKASH GANDHAR

3 months ago

838
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

Author:
Samuel Abera

6 months ago

1.5k
Icon Notification Badge with Count

Author:
Arya

1 year ago

11.8k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

1 year ago

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

Author:
Prajwal Hallale

1 year ago

7.5k
Notification alert section
Show info, success, or error messages

Author:
Arya

2 years ago

9.3k
Trending Users
Tailwind Flex Trending Users Card Design

Author:
Samuel Abera

5 months ago

1.9k
Notification Badge

Author:
Mr Robot

2 years ago

9k
Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

6 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent