Search Components

Sticky Navigation

Navigation that remains visible when scrolling

Sticky Navigation Component

Responsive Sticky Navigation Component with Dark Mode

                <nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">Social Site</div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
      </div>
      <div class="md:hidden">
        <button class="mobile-menu-button text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
          <svg class="h-6 w-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 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="mobile-menu hidden md:hidden mt-2">
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Profile</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Messages</a>
    </div>
  </div>
</nav>

Sticky Navigation Component

A responsive sticky navigation bar designed with microinteractions and a triadic color scheme, suitable for blogs and content consumption.

Open Preview

                <header class="bg-blue-300 dark:bg-blue-800 fixed top-0 w-full shadow-md z-10 transition-all duration-300 ease-in-out">
    <div class="flex justify-between items-center p-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold transition-transform transform hover:scale-105">MyBlog</a>
        <nav class="space-x-4">
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Blog</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="bg-blue-400 dark:bg-blue-700 h-1 transition-all duration-300 ease-in-out" style="transform: scaleY(0.5);"></div>
</header>

<main class="pt-20 px-4">
    <section class="my-8">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Latest Articles</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
        </div>
    </section>
</main>

<footer class="bg-gray-300 dark:bg-gray-700 p-4 text-center">
    <p class="text-gray-800 dark:text-gray-200">&copy; 2023 MyBlog. All rights reserved.</p>
</footer>

A complex, skeuomorphic sticky navigation bar with vibrant colors, designed for social media interfaces. Includes responsive design and dark mode support using Tailwind CSS. Features profile image, search bar, notifications, and messaging icons.

Open Preview

                <nav class="sticky top-0 bg-gradient-to-b from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Profile Pic and Site Title -->
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full border-2 border-white mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
      <span class="text-white text-2xl font-bold drop-shadow-md">SocialNet</span>
    </div>

    <!-- Search Bar -->
    <div class="flex-grow mx-5">
      <input type="text" placeholder="Search..." class="w-full px-4 py-2 rounded-full bg-white bg-opacity-30 text-white placeholder-white::placeholder focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 dark:placeholder-gray-300">
    </div>

    <!-- Icons -->
    <div class="flex items-center space-x-6">
      <a href="#" class="text-white hover:scale-110 transition-transform duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
        </svg>
      </a>
      <a href="#" class="text-white hover:scale-110 transition-transform duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55c-.18.18-.42.29-.67.29H9v-.54l-.55-.55z"/>
        </svg>
      </a>
    </div>
  </div>
</nav>

Sticky Navigation Component

A Brutalist-style sticky navigation component suitable for social media interfaces, featuring a bold, high-contrast design and dark mode support.

Open Preview

                <nav class="bg-blue-600 dark:bg-blue-900 fixed top-0 w-full z-30 p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <h1 class="text-white text-lg font-bold">Social Media</h1>
        </div>
        <ul class="flex space-x-8">
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Home</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Profile</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Messages</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Settings</a></li>
        </ul>
    </div>
</nav>

<header class="mt-16 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="container mx-auto">
        <h2 class="text-2xl text-gray-900 dark:text-white font-bold">Welcome to Our Network</h2>
        <p class="text-gray-700 dark:text-gray-300">Connect with friends and the world around you!</p>
    </div>
</header>

<main class="mt-4 p-4 container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a sample post content. It can be about anything interesting happening on the network.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Another sample post content with some engaging information for users.</p>
        </div>
    </div>
</main>

Sticky Navigation Component

A sticky navigation component designed in a skeuomorphic style, showcasing complementary colors, suitable for a portfolio with a rich interface.

Open Preview

                <header class="bg-gray-800 dark:bg-gray-900 shadow-lg sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full bg-white shadow-md">
                <h1 class="text-white text-2xl font-semibold">My Portfolio</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="#about" class="text-gray-200 hover:text-gray-100">About</a>
                <a href="#projects" class="text-gray-200 hover:text-gray-100">Projects</a>
                <a href="#contact" class="text-gray-200 hover:text-gray-100">Contact</a>
                <a href="#blog" class="text-gray-200 hover:text-gray-100">Blog</a>
            </nav>
            <div class="md:hidden">
                <button class="text-gray-200 focus:outline-none" aria-label="Open menu">
                    <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>
    </div>
</header>

<main class="py-10 bg-gray-100 dark:bg-gray-800">
    <section id="about" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">About Me</h2>
        <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>

    <section id="projects" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Projects</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </section>

    <section id="contact" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Contact Me</h2>
        <form class="mt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <input type="text" placeholder="Name" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
                <input type="email" placeholder="Email" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
            </div>
            <textarea placeholder="Message" class="mt-4 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" rows="4" required></textarea>
            <button type="submit" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow">Send Message</button>
        </form>
    </section>
</main>

<footer class="bg-gray-800 dark:bg-gray-900 py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-gray-200">© 2023 My Portfolio. All Rights Reserved.</p>
        <div class="flex justify-center space-x-4 mt-2">
            <a href="https://randomuser.me" class="text-gray-200 hover:text-gray-100" aria-label="Instagram">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
            </a>
            <a href="#" class="text-gray-200 hover:text-gray-100" aria-label="Twitter">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.643 4.937c-.835.37-1.734.617-2.676.726.96-.576 1.694-1.49 2.04-2.573-.897.53-1.887.916-2.943 1.125-.84-.89-2.025-1.455-3.345-1.455-2.547 0-4.608 2.036-4.608 4.547 0 .356.04.703.117 1.037-3.83-.192-7.22-2.032-9.495-4.82-.395.683-.621 1.477-.621 2.358 0 1.63.826 3.069 2.083 3.917-.767-.024-1.487-.235-2.118-.589v.059c0 2.27 1.623 4.153 3.774 4.583-.395.108-.81.165-1.236.165-.303 0-.6-.029-.889-.086.601 1.864 2.339 3.218 4.394 3.262-1.62 1.28-3.645 2.047-5.842 2.047-.38 0-.759-.022-1.133-.066 2.091 1.335 4.594 2.118 7.269 2.118 8.733 0 13.492-7.31 13.492-13.63 0-.208-.004-.415-.015-.621.918-.658 1.714-1.48 2.347-2.415z"/></svg>
            </a>
        </div>
    </div>
</footer>

Sticky Navigation Component

A minimalist flat design sticky navigation component with a monochromatic color scheme for business/corporate websites. The design includes multiple interactive elements and supports dark theme.

Open Preview

                <header class="bg-white dark:bg-gray-800 fixed top-0 inset-x-0 shadow-md z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40/40" alt="Logo" class="w-10 h-10 rounded-full">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Business Name</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Contact</a>
        </nav>
        <a href="#" class="hidden md:block bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition duration-150">Get Started</a>
        <button class="md:hidden flex items-center justify-center p-2 text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none" aria-label="Toggle menu">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 6h14M3 10h14M3 14h14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
    </div>
</header>

<main class="mt-16 p-4">
    <section class="bg-gray-100 dark:bg-gray-900 p-8 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Business</h2>
        <p class="text-gray-600 dark:text-gray-400">We provide exceptional services to help you grow your business.</p>
        <img src="https://picsum.photos/800/400" alt="Business Image" class="mt-4 rounded-lg shadow-md">
    </section>
</main>

Retro E-commerce Sticky Navigation

A retro/vintage sticky navigation component for e-commerce sites with vibrant colors, complex elements, responsiveness, and dark mode support using Tailwind CSS.

Open Preview

                <nav class="bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 text-white sticky top-0 z-50 shadow-lg dark:from-gray-800 dark:via-gray-700 dark:to-gray-600">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand -->
    <div class="flex items-center">
      <span class="text-2xl font-bold font-serif italic">RetroFinds</span>
    </div>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">New Arrivals</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Shop All</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Sale</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Contact</a>
    </div>

    <!-- Search and Icons -->
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="bg-white text-gray-800 rounded-full py-1 px-4 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:bg-gray-700 dark:text-white">
        <svg class="h-5 w-5 text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/2 dark:text-gray-300" 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>
      </div>
      <a href="#" class="relative">
        <svg class="h-6 w-6 hover:text-yellow-300 transition duration-300 ease-in-out" 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 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>
      <a href="#">
        <svg class="h-6 w-6 hover:text-yellow-300 transition duration-300 ease-in-out" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
      </a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden flex items-center">
      <button class="mobile-menu-button">
        <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 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu Content (hidden by default) -->
  <div class="mobile-menu hidden md:hidden bg-purple-500 dark:bg-gray-700">
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">New Arrivals</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Shop All</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Sale</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Contact</a>
  </div>
</nav>

Sticky Navigation Component - Neumorphism

A responsive sticky navigation component with Neumorphism design, complementary color scheme, and dark theme support, suitable for a portfolio website. Uses Tailwind CSS with dark mode classes and includes subtle shadows for the Neumorphism effect.

Open Preview

                <nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
    <ul class="flex space-x-4">
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>

Sticky Navigation Component

A sticky navigation component designed in a skeuomorphic style, suitable for e-commerce websites with a responsive design and dark theme support using Tailwind CSS.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg py-4 fixed w-full z-10">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 rounded-lg" />
            <h1 class="text-lg text-white font-bold">ShopEasy</h1>
        </div>
        <div class="hidden md:flex md:space-x-8">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Products</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">About Us</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="h-8 w-8 rounded-full" />
            </a>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Cart</button>
        </div>
    </div>
</nav>

<main class="pt-24">
    <h2 class="text-3xl text-gray-800 dark:text-gray-200 text-center my-8">Welcome to ShopEasy!</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-8">Discover amazing products with unbeatable prices.</p>
    <div class="flex justify-center space-x-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="rounded-lg shadow-md" />
    </div>
</main>

Sticky Navigation Component

A dark mode sticky navigation component for e-commerce, using a complementary color scheme and basic layout.

Open Preview

                <nav class="bg-gray-900 sticky top-0 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/50/50" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8 ml-10">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <button class="text-gray-300 hover:bg-gray-700 hover:text-white p-1 rounded-full">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Profile">
        </button>
      </div>
    </div>
  </div>
</nav>

Search Components

Categories

Sticky Navigation