Navigations-Komponenten

RetroPortfolioNavigation

Retro/Vintage-Navigationskomponente für Portfolio mit Pastell-Farbschema, reaktionsschneller und Unterstützung für den Dunkelmodus.

Vorschau öffnen

                <nav class="bg-gradient-to-r from-pink-200 via-purple-200 to-indigo-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-6 shadow-lg font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4 md:mb-0">
      <span class="self-center text-3xl font-semibold whitespace-nowrap text-gray-800 dark:text-gray-100">
        My Portfolio
      </span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
      </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Projects</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Contact</a>
        </li>
        <li>
          <div class="relative group">
            <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 md:w-auto dark:text-gray-100 md:dark:hover:text-purple-400 dark:focus:text-gray-100 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown
              <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
              </svg>
            </button>
            <!-- Dropdown menu -->
            <div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600 absolute group-hover:block">
              <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
                </li>
              </ul>
              <div class="py-1">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Komponente "Navigationskomponenten"

Glassmorphism Monochromatische moderate E-Commerce-Navigationskomponente mit Unterstützung für den Dunkelmodus

Vorschau öffnen

                <nav class="p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-20 text-gray-800 dark:text-white shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo or Brand Name -->
    <a href="#" class="text-xl font-bold p-2">ShopSphere</a>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
      </svg>
    </button>

    <!-- Navigation Links -->
    <div class="hidden lg:flex flex-grow items-center justify-center" id="navbar-collapse">
      <ul class="flex flex-col lg:flex-row gap-1 lg:gap-4">
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Home</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Products</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Categories</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">About Us</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Contact</a></li>
      </ul>
    </div>

    <!-- Search and Cart Icons -->
    <div class="flex items-center gap-2 p-2">
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </a>
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300 relative">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        </a>
    </div>

  </div>
</nav>

Retro-E-Commerce-Navigationsleiste

Eine Graustufen-Navigationskomponente im Retro-/Vintage-Stil für den E-Commerce mit moderater Komplexität und interaktiven Elementen wie Hovers und Dropdowns. Es ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus mit Tailwind CSS.

Vorschau öffnen

                <nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="text-lg font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
      <div class="relative group">
        <button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
        <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      </a>
      <button class="md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
  </nav>

Retro Social Media Navigation

Responsive Navigationskomponente mit Dark Mode für Social Media (Retro/Vintage, Erdtöne, moderate Komplexität)

Vorschau öffnen

                <nav class="bg-stone-200 dark:bg-stone-800 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-xl font-bold text-stone-800 dark:text-stone-200">SocialApp</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Feed</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Profile</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Messages</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Settings</a></li>
    </ul>
  </div>
</nav>

Eine Navigationskomponente im brutalistischen Stil mit einem pastellfarbenen Farbschema für Social-Media-Oberflächen, mit einem responsiven Layout und Unterstützung für dunkle Themen.

Vorschau öffnen

                <nav class="flex flex-col md:flex-row justify-between items-center p-4 bg-pink-200 dark:bg-gray-800">
  <div class="flex items-center mb-4 md:mb-0">
    <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white">MySocial</h1>
  </div>
  <ul class="flex flex-col md:flex-row">
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Home</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Profile</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Messages</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Settings</a>
    </li>
    <li class="mx-2">
      <a href="#" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-200">Logout</a>
    </li>
  </ul>
</nav>

<section class="p-4 space-y-5">
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">Recent Posts</h2>
    <p class="text-gray-700 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">User Activity</h2>
    <p class="text-gray-700 dark:text-gray-200">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">Trending Topics</h2>
    <p class="text-gray-700 dark:text-gray-200">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </article>
</section>

<footer class="bg-pink-200 dark:bg-gray-800 p-4 text-center">
  <p class="text-gray-800 dark:text-white">© 2022 MySocial. All rights reserved.</p>
</footer>

Navigationskomponente "Brutalismus"

Eine reaktionsschnelle Navigationskomponente im brutalistischen Stil mit einem monochromen Farbschema, ideal für eine Portfolio-Website. Zu den Funktionen gehören ein fettes Layout mit hohem Kontrast, Unterstützung für den Dunkelmodus mit Tailwind CSS und interaktive Elemente wie Dropdowns oder Schaltflächenlinks.

Vorschau öffnen

                <nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
    <div class="text-white font-bold text-2xl">
        Portfolio
    </div>
    <ul class="flex space-x-6">
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
        </li>
    </ul>
    <div class="relative group">
        <button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
            Menu
        </button>
        <div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
        </div>
    </div>
</nav>

<section class="bg-gray-800 dark:bg-gray-900 p-10">
    <h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of project 1.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of project 2.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of project 3.</p>
            </div>
        </div>
    </div>
</section>

Navigationskomponente

Eine komplexe Navigationskomponente im 3D-Design für Blogs mit einem triadischen Farbschema und reaktionsschneller Unterstützung für dunkle Themen.

Vorschau öffnen

                <nav class="bg-gray-800 p-5 shadow-lg rounded-lg relative overflow-hidden">
    <div class="absolute inset-0 transform -translate-x-2 -translate-y-2 bg-gradient-to-r from-blue-500 to-green-500 opacity-20 rounded-lg"></div>
    <h1 class="text-white text-3xl font-bold relative z-10">My Blog</h1>
    <ul class="flex space-x-4 mt-4">
        <li class="relative group">
            <a href="#" class="text-blue-300 hover:text-blue-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-blue-500">Home</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-green-300 hover:text-green-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-green-500">About</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-red-300 hover:text-red-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-red-500">Contact</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-yellow-300 hover:text-yellow-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-yellow-500">Blog</a>
        </li>
    </ul>
    <div class="mt-5 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
            <span class="text-white">Welcome, User!</span>
        </div>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition ease-in-out duration-300">Search</button>
    </div>
</nav>

<!-- Dark Mode Styling -->
<nav class="dark:bg-gray-900 dark:text-gray-200 dark:shadow-2xl">
    <div class="dark:bg-gradient-to-r dark:from-blue-600 dark:to-green-600 dark:opacity-30 dark:rounded-lg"></div>
    <h1 class="dark:text-white">My Blog</h1>
    <ul class="space-x-4">
        <li>
            <a href="#" class="dark:text-blue-500 hover:dark:text-blue-400">Home</a>
        </li>
        <li>
            <a href="#" class="dark:text-green-500 hover:dark:text-green-400">About</a>
        </li>
        <li>
            <a href="#" class="dark:text-red-500 hover:dark:text-red-400">Contact</a>
        </li>
        <li>
            <a href="#" class="dark:text-yellow-500 hover:dark:text-yellow-400">Blog</a>
        </li>
    </ul>
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="rounded-full">
            <span>Welcome, User!</span>
        </div>
        <button class="bg-blue-600 text-white">Search</button>
    </div>
</nav>

Brutalistische Social-Media-Navigation

Eine reaktionsschnelle Navigationskomponente, die in einem brutalistischen Stil für Social-Media-Anwendungen entwickelt wurde und ein komplementäres Farbschema und minimale Elemente verwendet.

Vorschau öffnen

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
        <a href="#" class="text-white dark:text-gray-200 font-bold text-lg">Logo</a>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a></li>
        </ul>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
        <a href="#" class="text-white dark:text-gray-200 font-bold">Logout</a>
    </div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Social Media</h1>
    <img src="https://picsum.photos/800/400" alt="Random Image" class="rounded-lg shadow-lg">
</div>

Skeuomorphe Navigation

Eine einfache, reaktionsschnelle Navigationskomponente mit Skeuomorphem Design, analogem Farbschema, das für Social-Media-Anwendungen geeignet ist, mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Home
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Profile
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Messages
        </div>
      </a>
    </div>
  </div>
</nav>

Skeuomorphe Navigationskomponente

Eine Navigationskomponente im skeuomorphen Stil mit einem komplementären Farbschema, das für ein Dashboard mit Datenvisualisierung und Bedienfeldern geeignet ist. Es enthält interaktive Elemente für die Benutzerbindung.

Vorschau öffnen

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

Kategorien

Navigations-Komponenten