Home
Cristian
Apple Dock Navigation Bar

Apple Dock Navigation Bar

This tailwind example is contributed by Cristian, on 09-Jan-2025. Component is made with Tailwind CSS v3.

1.5k

<section class="fixed bottom-10 inset-x-0 flex justify-center">
    <ul class="flex space-x-4">
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be92ee5ddf0080fb90_notion.png" alt="Notion app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Notion
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bef9d004f8a9cf3b29_asana.png" alt="Asana app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Asana
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be8c099d4e1ed55770_slack.png" alt="Slack app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Slack
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be5b31ba243e4da377_loom.png" alt="Loom app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Loom
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bea97e140677496dae_spotify.png" alt="Spotify app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Spotify
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bea73fcc6ee568f6f0_webflow.png" alt="Webflow app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Webflow
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bdf9d004f8a9cf3b09_adobe-illustrator.png" alt="Adobe Illustrator app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Adobe Illustrator
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be1de916069b5e1aaa_figma.png" alt="Figma app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Figma
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be1de916069b5e1a86_adobe-photoshop.png" alt="Photoshop app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Photoshop
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be051d32942a7aa31e_adobe-premierepro.png" alt="Premiere Pro app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Premiere Pro
        </div>
      </li>
    </ul>
  </section>
</body>

Related Examples

background animation
background animation

Author:
Jayendra Madara

1 year ago

2.9k
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

1 month ago

209
chart
to chart on your family and

Author:
Nishimwe Jeanine

5 months ago

432
Product cards
Product cards for eCommerce

Author:
ehmasuk

1 day ago

18
modern portifolio
by salvator

Author:
Baraka Salvator

5 months ago

561
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

7 months ago

1.1k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

3 years ago

18.8k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

4 months ago

585
Sign up
sign up page

Author:
gidy

5 months ago

946
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

7 months ago

1.1k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

5 months ago

839
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

507

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components