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

1.9k

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