Navigation

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-700 dark:text-gray-300 font-bold text-xl">E-Shop</div>
    <div class="flex space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full py-2 px-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark focus:outline-none">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
        Cart
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
        Account
      </a>
    </div>
  </div>
</nav>

<style>
  /* Add these to your Tailwind configuration */
  /*
  module.exports = {
    theme: {
      extend: {
        boxShadow: {
          'neumorphic-light': '9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5)',
          'neumorphic-dark': '9px 9px 16px rgba(0,0,0,.6), -9px -9px 16px rgba(50, 50, 50, .5)',
          'neumorphic-inset-light': 'inset 3px 3px 7px rgba(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255,.5)',
          'neumorphic-inset-dark': 'inset 3px 3px 7px rgba(0,0,0,.6), inset -3px -3px 7px rgba(50, 50, 50,.5)',
        }
      }
    }
  }
  */
</style>
              

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-5 transition-transform transform hover:scale-105">
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <h1 class="text-gray-800 dark:text-white text-xl font-bold ml-3">Brand</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
    </div>
    <button class="md:hidden text-gray-800 dark:text-gray-200 p-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-600">
      <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-7 6h7" />
      </svg>
    </button>
  </div>

  <div class="mt-4 md:hidden">
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
  </div>

  <div class="mt-5 flex">
    <input type="text" placeholder="Search..." class="flex-1 p-2 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 placeholder-gray-400 dark:placeholder-gray-500" />
    <button class="ml-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 p-2 rounded-lg shadow hover:shadow-lg transition duration-300">
      <img class="w-5 h-5" src="https://picsum.photos/seed/pic1/30/30" alt="Search Icon" />
    </button>
  </div>
</nav>

              

                <nav class="bg-gray-800 p-4 shadow-md">
    <div class="flex justify-between items-center">
        <div class="text-white text-lg font-bold">Retro Dashboard</div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-300 hover:text-white">Data</a>
            <a href="#" class="text-gray-300 hover:text-white">Settings</a>
            <a href="#" class="text-gray-300 hover:text-white">Profile</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:text-white">
                <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 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white">Data</a>
        <a href="#" class="block text-gray-300 hover:text-white">Settings</a>
        <a href="#" class="block text-gray-300 hover:text-white">Profile</a>
    </div>
</nav>

<div class="p-4">
    <h2 class="text-white text-2xl mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 1</h3>
            <p class="text-gray-300">Description of data point 1.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 2</h3>
            <p class="text-gray-300">Description of data point 2.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 3</h3>
            <p class="text-gray-300">Description of data point 3.</p>
        </div>
    </div>
</div>
              

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg">
    <div class="flex items-center justify-between">
        <a href="#" class="text-white text-lg font-semibold">Logo</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-300 hover:text-white">Explore</a>
            <a href="#" class="text-gray-300 hover:text-white">Notifications</a>
            <a href="#" class="text-gray-300 hover:text-white">Messages</a>
            <a href="#" class="text-gray-300 hover:text-white">Profile</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:text-white focus:outline-none" aria-label="Menu">
                <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 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white">Explore</a>
        <a href="#" class="block text-gray-300 hover:text-white">Notifications</a>
        <a href="#" class="block text-gray-300 hover:text-white">Messages</a>
        <a href="#" class="block text-gray-300 hover:text-white">Profile</a>
    </div>
</nav>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Friends</h2>
    <div class="flex space-x-4 mt-2">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 1</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 2</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 3</span>
        </div>
    </div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Trending Posts</h2>
    <div class="flex flex-col space-y-4 mt-2">
        <div class="flex space-x-2">
            <img src="https://picsum.photos/50/50" alt="Post Image" class="rounded-lg">
            <div>
                <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <div class="flex space-x-2">
            <img src="https://picsum.photos/50/50?random=1" alt="Post Image" class="rounded-lg">
            <div>
                <p class="text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <span class="text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
</div>\n<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Explore More</h2>
    <ul class="mt-2 space-y-1">
        <li><a href="#" class="text-gray-300 hover:text-white">#Nature</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Travel</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Food</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Technology</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Lifestyle</a></li>
    </ul>
</div>
              

                <nav class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 flex flex-col md:flex-row md:justify-between md:items-center">
    <div class="flex items-center mb-4 md:mb-0">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-lg font-bold text-violet-700 dark:text-violet-400 ml-3">My Blog</h1>
    </div>
    <ul class="flex flex-col md:flex-row space-x-0 md:space-x-6">
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Blog</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
        </li>
    </ul>
</nav>

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Latest Posts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title One</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the first blog post. It's an engaging intro that invites readers to learn more.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title Two</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the second blog post. It has some intriguing insights to offer.</p>
        </div>
    </div>
</div>
              

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <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>
              

                <nav class="bg-pink-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="flex items-center justify-between">
        <div class="text-xl font-bold text-gray-800 dark:text-white">
            RetroSocial
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
        </div>
        <button class="md:hidden bg-pink-600 text-white p-2 rounded-lg hover:bg-pink-500 transition duration-200">
            Menu
        </button>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
    </div>
</nav>
<div class="bg-pink-50 dark:bg-gray-900 p-6 mt-4 rounded-lg">
    <h2 class="text-2xl text-gray-800 dark:text-white font-bold">Welcome to RetroSocial</h2>
    <p class="text-gray-600 dark:text-gray-300 mt-2">
        Connect with friends, share memories, and explore the past with our vintage-inspired social media platform.
    </p>
    <div class="mt-4 flex space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
    </div>
</div>
              

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
        </div>
    </div>
</nav>
              

                <nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg md:flex md:justify-between md:items-center py-4 px-6 fixed w-full z-10 dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
    <div class="flex justify-between items-center">
        <a href="#" class="text-gray-700 text-xl font-bold md:text-2xl dark:text-white">Your Logo</a>
        <div class="flex md:hidden">
            <button type="button" class="text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-gray-200 dark:hover:text-white">
                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                    <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                </svg>
            </button>
        </div>
    </div>

    <div class="hidden md:flex flex-col md:flex-row md:mx-6">
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Home</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Shop</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Categories</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Contact</a>
    </div>

    <div class="relative hidden md:block">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </span>

        <input type="text" class="w-full border rounded-md pl-10 pr-4 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white" placeholder="Search">
    </div>
</nav>
              

                <nav class="bg-gray-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold">Brand</a>
            <a href="#" class="hidden md:block">Home</a>
            <a href="#" class="hidden md:block">About</a>
            <a href="#" class="hidden md:block">Services</a>
            <a href="#" class="hidden md:block">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
        </div>
    </div>
</nav>

<main class="bg-gray-800 min-h-screen p-4">
    <h1 class="text-3xl mb-4">Welcome to Our Website</h1>
    <img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
    <p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>

<footer class="bg-gray-900 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2023 Navigation Component. All rights reserved.</p>
    </div>
</footer>