Search Components

All Components

Browse all available Tailwind CSS components

Sidebar Navigation Component

A simple, responsive sidebar navigation component with microinteraction-focused hover effects, designed for government/public service websites. Features analogous color scheme and dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
    <!-- Sidebar -->
    <aside class="w-64 bg-teal-600 dark:bg-teal-800 text-white shadow-lg overflow-y-auto transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out md:relative absolute z-40" id="sidebar">
        <div class="p-6 flex items-center justify-between border-b border-teal-500 dark:border-teal-700">
            <a href="#" class="text-2xl font-bold text-white tracking-wide">GovConnect</a>
            <button id="sidebar-close" class="md:hidden focus:outline-none">
                <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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <nav class="mt-8">
            <ul>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-6 3h3v-3m0 0a1 1 0 001-1V9a1 1 0 00-1-1h-3c-.6 0-1 .4-1 1v3c0 .6.4 1 1 1z"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Public Services</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.3.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Citizens</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Departments</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.589.362 1.36.259 1.93-1.066zm-2.476 8.36L9.73 12m0 0l-3.33-2.35M9.73 12l-2.35 3.33M12 2v4m0 16v-4m-10-8H4m16 0h-2"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Settings</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="absolute bottom-0 left-0 w-full p-6 border-t border-teal-500 dark:border-teal-700 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-teal-400 dark:border-teal-600">
            <div>
                <p class="text-sm font-semibold text-white">John Doe</p>
                <p class="text-xs text-teal-200 dark:text-teal-300">Administrator</p>
            </div>
        </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col">
        <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md md:shadow-none relative z-30">
            <button id="sidebar-open" class="md:hidden focus:outline-none text-gray-700 dark:text-gray-300">
                <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"></path>
                </svg>
            </button>

            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard Overview</h1>

            <!-- Dark Mode Toggle -->
            <button id="dark-mode-toggle" class="focus:outline-none p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
                <svg class="h-6 w-6 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path id="light-icon" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-4.32a6 6 0 11-1.042 12.639C10.156 20.354 11.229 21 12 21c3.866 0 7-3.134 7-7s-3.134-7-7-7z"></path>
                    <path id="dark-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                </svg>
            </button>
        </header>

        <main class="flex-1 p-6 md:p-8 overflow-y-auto">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Card 1 -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Latest Announcement</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">New guidelines for public assistance available from October 1st.</p>
                    <a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
                        Read More
                        <svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                    <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
                </div>
                <!-- Card 2 -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Open Data Portal</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Explore datasets related to local economy and demographics.</p>
                    <a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
                        Access Data
                        <svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                    <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
                </div>
                <!-- Card 3 -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Contact Support</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Our support team is available 24/7 for your queries.</p>
                    <a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
                        Get Help
                        <svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                    <img src="https://picsum.photos/300/200?random=3" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    const sidebar = document.getElementById('sidebar');
    const sidebarOpenBtn = document.getElementById('sidebar-open');
    const sidebarCloseBtn = document.getElementById('sidebar-close');
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    const lightIcon = document.getElementById('light-icon');
    const darkIcon = document.getElementById('dark-icon');

    // Sidebar Toggle
    sidebarOpenBtn.addEventListener('click', () => {
        sidebar.classList.remove('-translate-x-full');
    });

    sidebarCloseBtn.addEventListener('click', () => {
        sidebar.classList.add('-translate-x-full');
    });

    // Close sidebar if window resized to md or larger while open
    window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) { // md breakpoint
            sidebar.classList.remove('-translate-x-full');
        }
    });

    // Dark Mode Toggle
    function toggleDarkMode() {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('theme', 'light');
            lightIcon.classList.add('hidden');
            darkIcon.classList.remove('hidden');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('theme', 'dark');
            lightIcon.classList.remove('hidden');
            darkIcon.classList.add('hidden');
        }
    }

    darkModeToggle.addEventListener('click', toggleDarkMode);

    // Initial theme setting based on localStorage or system preference
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme === 'dark' || (!currentTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
        lightIcon.classList.remove('hidden');
        darkIcon.classList.add('hidden');
    } else {
        lightIcon.classList.add('hidden');
        darkIcon.classList.remove('hidden');
    }
</script>

User Profiles Component

A user profiles component for agricultural/farming websites, featuring an industrial design style with muted colors, user avatars, roles, and location info. It's responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-8 sm:mb-12 text-center">
      Our Team in the Field
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Profile Card 1 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Farmer
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/75.jpg" alt="John Doe">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Lead Agronomist</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Specializing in crop rotation and soil health management for sustainable agriculture.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Midwest Region, USA</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Analyst
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Jane Smith">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Jane Smith</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Data Scientist</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Leveraging satellite imagery and AI for optimal crop yield predictions and resource allocation.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Southern Europe</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Engineer
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Peter Brown">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Peter Brown</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Farm Robotics Engineer</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Designing and deploying autonomous farm machinery to enhance efficiency and reduce labor costs.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Northern Plains, Canada</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Researcher
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Sarah Lee">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Sarah Lee</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Livestock Specialist</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Focused on animal welfare, nutrition, and sustainable pasture management for livestock farming.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Australia Farmlands</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 5 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Manager
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="David Green">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">David Green</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Operations Manager</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Overseeing day-to-day farm operations, logistics, and supply chain management for efficiency.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">South America</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 6 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Specialist
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/17.jpg" alt="Emily White">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Emily White</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Farm Sustainability Advisor</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Guiding farms towards eco-friendly practices, carbon neutrality, and biodiversity preservation.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Pacific Northwest, USA</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Luxury Gallery Component

An elegant and sophisticated gallery component designed for music and audio platforms, featuring warm neutrals, responsive layouts, and dark mode support.

Open Preview

                <div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 min-h-screen font-serif py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-stone-900 dark:text-stone-50 mb-4 selection:bg-stone-300 dark:selection:bg-stone-700">
        Featured Albums & Artists
      </h2>
      <p class="mt-4 text-xl text-stone-600 dark:text-stone-300 font-light max-w-2xl mx-auto selection:bg-stone-300 dark:selection:bg-stone-700">
        Discover exquisite sounds and immerse yourself in a curated collection of premium audio experiences.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
      <!-- Gallery Item 1 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1043/400/300" alt="Album Cover 1">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">The Serenity Sessions</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">A calming journey through ambient soundscapes and melodic textures, perfect for relaxation.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Elysia Croft</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/111/400/300" alt="Album Cover 2">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Urban Pulse Beat</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Feel the rhythm of the city with a vibrant mix of electronic and hip-hop beats.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">DJ Synapse</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1069/400/300" alt="Album Cover 3">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Timeless Melodies</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Classic instrumental pieces reimagined for the modern audiophile, a true auditory delight.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/67.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Maestro Orion</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1051/400/300" alt="Album Cover 4">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Jazzy Nights</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Smooth saxophone solos and soulful piano melodies for the perfect evening ambiance.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Luna Serenade</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1025/400/300" alt="Album Cover 5">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Echoes of the Forest</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Nature-inspired soundscapes blending organic instruments and environmental recordings.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Forest Whisperer</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1084/400/300" alt="Album Cover 6">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Acoustic Reverie</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Unplugged sessions delivering raw emotion and pure, unadulterated musicality.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Willow Creek Band</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

CAPTCHA Component

A simple, clean, monospace-themed CAPTCHA component for food/restaurant websites, featuring a grayscale color scheme and full responsiveness with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono p-4">
  <div class="w-full max-w-sm rounded-lg shadow-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="p-6 space-y-4">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 text-center">
        Verify You Are Human
      </h2>
      <p class="text-sm text-gray-700 dark:text-gray-300 text-center leading-relaxed">
        To proceed, please select all images containing <span class="text-gray-900 dark:text-gray-100 font-semibold">burgers</span>.
      </p>
      <div class="grid grid-cols-3 gap-2">
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/1084/300/200" alt="Image 1" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/433/300/200" alt="Image 2" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/1069/300/200" alt="Image 3" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/228/300/200" alt="Image 4" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/111/300/200" alt="Image 5" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/350/300/200" alt="Image 6" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-between pt-4">
        <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
          <svg class="w-5 h-5" 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 4v5h.582m15.356 2A8.001 8.001 0 004 12v2m7 12h.582M20 20v-5h-.582m0 0a8.005 8.005 0 00-15.356-2L4 12V4"></path></svg>
          <button class="text-sm hover:underline focus:outline-none">Reload</button>
        </div>
        <button class="px-5 py-2 bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-opacity-50">
          Verify
        </button>
      </div>
    </div>
  </div>
</div>

Chat Window Component

A simple, clean, and trustworthy chat window component with a pastel color scheme, suitable for corporate or travel/tourism websites. It's fully responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl">
    <!-- Chat Header -->
    <div class="flex items-center justify-between p-4 bg-lime-100 dark:bg-lime-800 border-b border-lime-200 dark:border-lime-700">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-white dark:border-gray-800 mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div>
          <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-100">Travel Agent Support</h3>
          <p class="text-sm text-lime-700 dark:text-lime-200">Online</p>
        </div>
      </div>
      <button class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-50">
        <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="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Chat Body -->
    <div class="h-80 overflow-y-auto p-4 bg-lime-50 dark:bg-gray-700 transition-colors duration-200">
      <!-- Incoming Message -->
      <div class="flex items-start mb-4">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div class="bg-white dark:bg-gray-600 p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-gray-800 dark:text-gray-100">Hello! How can I assist you with your travel plans today?</p>
          <span class="block text-right text-xs text-gray-500 dark:text-gray-300 mt-1">10:00 AM</span>
        </div>
      </div>

      <!-- Outgoing Message -->
      <div class="flex justify-end mb-4">
        <div class="bg-lime-200 dark:bg-lime-600 p-3 rounded-tl-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-lime-900 dark:text-lime-50">Hi there! I'm planning a trip to Europe next summer and need some advice on itineraries.</p>
          <span class="block text-left text-xs text-lime-700 dark:text-lime-200 mt-1">10:02 AM</span>
        </div>
      </div>

      <!-- Incoming Message -->
      <div class="flex items-start mb-4">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div class="bg-white dark:bg-gray-600 p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-gray-800 dark:text-gray-100">Excellent! Europe offers so many possibilities. Are you looking for historical tours, scenic routes, or something more adventurous?</p>
          <span class="block text-right text-xs text-gray-500 dark:text-gray-300 mt-1">10:05 AM</span>
        </div>
      </div>
    </div>

    <!-- Chat Footer (Input Area) -->
    <div class="p-4 bg-lime-100 dark:bg-lime-800 border-t border-lime-200 dark:border-lime-700 flex items-center">
      <input type="text" placeholder="Type your message..." class="flex-grow p-3 rounded-full border border-lime-300 dark:border-lime-600 bg-white dark:bg-lime-700 text-lime-900 dark:text-lime-50 placeholder-lime-500 dark:placeholder-lime-300 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent transition-all duration-200">
      <button class="ml-3 p-3 bg-lime-500 dark:bg-lime-400 text-white rounded-full hover:bg-lime-600 dark:hover:bg-lime-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-opacity-50">
        <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="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>

A responsive social media navigation component with a muted/desaturated color scheme, inspired by Material Design principles, supporting light and dark modes. Features grid-based layout and depth effects.

Open Preview

                <nav class="bg-gray-100 dark:bg-gray-800 shadow-md p-4 sticky top-0 z-50 transition-colors duration-300">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <!-- Logo/Brand -->
    <div class="flex-shrink-0">
      <a href="#" class="text-xl font-bold text-gray-800 dark:text-gray-200 tracking-wide hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-300">
        SocialSphere
      </a>
    </div>

    <!-- Search Bar (Desktop/Tablet) -->
    <div class="hidden md:block flex-grow max-w-lg mx-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-300">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500 dark:text-gray-400" 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>
    </div>

    <!-- Navigation Links -->
    <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-1" 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 12l2-2m0 0l7-7m-7 7v10a1 1 0 001 1h4m-4-10h10a1 1 0 011 1v10a1 1 0 01-1 1h-4m-6-6v6m6-3v3"></path></svg>
        <span>Home</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span>Messages</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-1" 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="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.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        <span>Notifications</span>
      </a>
    </div>

    <!-- Avatar/Profile (Desktop/Tablet) -->
    <div class="hidden md:block flex-shrink-0 ml-4">
      <a href="#" class="block relative">
        <img class="h-10 w-10 rounded-full border-2 border-gray-400 dark:border-gray-500 object-cover hover:ring-2 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-300" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Search Bar -->
  <div class="md:hidden mt-4">
    <div class="relative">
      <input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-300">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500 dark:text-gray-400" 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>
  </div>

  <!-- Mobile Bottom Navigation (Fixed) -->
  <div class="fixed bottom-0 left-0 right-0 bg-gray-100 dark:bg-gray-800 shadow-lg md:hidden p-3 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300 z-40">
    <div class="flex justify-around items-center w-full">
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <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="M3 12l2-2m0 0l7-7m-7 7v10a1 1 0 001 1h4m-4-10h10a1 1 0 011 1v10a1 1 0 01-1 1h-4m-6-6v6m6-3v3"></path></svg>
        <span class="text-xs mt-1">Home</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span class="text-xs mt-1">Chats</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <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="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.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        <span class="text-xs mt-1">Alerts</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300 relative">
        <img class="h-6 w-6 rounded-full border border-gray-400 dark:border-gray-500 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <span class="absolute top-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-500 -translate-y-1 translate-x-1"></span>
        <span class="text-xs mt-1">Profile</span>
      </a>
    </div>
  </div>
</nav>

Maps Component

A simple, responsive map component with a Material Design aesthetic and earth tone color scheme, featuring dark mode support. Suitable for entertainment/media platforms to show location-based content playfully.

Open Preview

                <div class="p-4 md:p-8 lg:p-12 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl rounded-2xl shadow-xl dark:shadow-2xl overflow-hidden bg-white dark:bg-stone-800 transition-colors duration-300 ease-in-out">
    <!-- Map Header -->
    <div class="relative h-48 sm:h-64 md:h-80 bg-gradient-to-br from-stone-500 to-stone-700 dark:from-stone-700 dark:to-stone-900 overflow-hidden flex items-center justify-center p-4">
      <img src="https://picsum.photos/1000/600?grayscale&blur=5" alt="Abstract Map Background" class="absolute inset-0 w-full h-full object-cover opacity-30">
      <div class="relative z-10 text-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">Explore New Horizons</h2>
        <p class="text-stone-200 text-sm sm:text-base">Discover captivating places, near and far.</p>
      </div>
      <button class="absolute top-4 right-4 bg-white/20 hover:bg-white/30 text-white rounded-full p-2 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition-colors duration-200">
        <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>

    <!-- Map Content Area -->
    <div class="p-4 sm:p-6 lg:p-8">
      <div class="mb-6">
        <h3 class="text-xl sm:text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Popular Destinations</h3>
        <p class="text-stone-600 dark:text-stone-300 text-sm">Hand-picked locations entertainment enthusiasts love.</p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <!-- Location Card 1 -->
        <div class="bg-stone-50 dark:bg-stone-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
          <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image for Location 1" class="w-full h-32 object-cover">
          <div class="p-3">
            <h4 class="text-lg font-medium text-stone-800 dark:text-stone-100 mb-1">Mystic Lake</h4>
            <p class="text-sm text-stone-500 dark:text-stone-400">A serene spot for nature documentaries.</p>
            <a href="#" class="mt-2 inline-block text-amber-600 dark:text-amber-400 hover:underline text-sm font-medium">View Map</a>
          </div>
        </div>

        <!-- Location Card 2 -->
        <div class="bg-stone-50 dark:bg-stone-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
          <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image for Location 2" class="w-full h-32 object-cover">
          <div class="p-3">
            <h4 class="text-lg font-medium text-stone-800 dark:text-stone-100 mb-1">Ancient Ruins</h4>
            <p class="text-sm text-stone-500 dark:text-stone-400">Ideal for historical drama series.</p>
            <a href="#" class="mt-2 inline-block text-amber-600 dark:text-amber-400 hover:underline text-sm font-medium">View Map</a>
          </div>
        </div>
      </div>

      <!-- Call to Action / Footer -->
      <div class="mt-8 pt-6 border-t border-stone-200 dark:border-stone-600 text-center">
        <p class="text-stone-600 dark:text-stone-300 text-sm mb-4">Can't find what you're looking for?</p>
        <button class="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-full shadow-md hover:shadow-lg transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-stone-800">
          Suggest a New Place
        </button>
      </div>
    </div>
  </div>
</div>

Playful_Consulting_Navigation_Component

A simple, playful, and cheerful navigation component for consulting/services, featuring rounded elements, a monochrome color scheme with a bright accent, and full responsiveness with dark mode support.

Open Preview

                <nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- Logo/Brand Name -->
    <a href="#" class="flex items-center space-x-2 rtl:space-x-reverse font-bold text-2xl text-gray-900 dark:text-white">
      <svg class="w-8 h-8 text-indigo-500" 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="M12 6V4m0 2a2 2 0 00-2 2v2a2 2 0 002 2 2 2 0 002-2V8a2 2 0 00-2-2zm0 6a2 2 0 00-2 2v2a2 2 0 002 2 2 2 0 002-2v-2a2 2 0 00-2-2z">
        </path>
      </svg>
      <span>BrightConsult</span>
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <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>

    <!-- Navigation Links -->
    <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-white dark:bg-gray-800 md:dark:bg-gray-900 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-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" 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-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</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-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About Us</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-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-white bg-indigo-500 rounded-full hover:bg-indigo-600 md:ml-4 transition-colors duration-200">Get Started</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggling mobile menu
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('[data-collapse-toggle="navbar-default"]');
    const menu = document.getElementById('navbar-default');

    if (button && menu) {
      button.addEventListener('click', function() {
        const expanded = this.getAttribute('aria-expanded') === 'true' || false;
        this.setAttribute('aria-expanded', !expanded);
        menu.classList.toggle('hidden');
      });
    }
  });
</script>

Cyberpunk Weather Navigation

A simple, responsive cyberpunk-themed navigation component for a weather application, featuring muted colors and neon accents, with dark mode support.

Open Preview

                <nav class="bg-neutral-900 py-4 dark:bg-black shadow-lg">
  <div class="container mx-auto px-4 flex justify-between items-center">
    <a href="#" class="text-blue-400 text-2xl font-bold font-mono tracking-widest dark:text-cyan-400 select-none">
      <span class="text-blue-500 dark:text-cyan-500">WΞATHЯ</span><span class="text-neutral-500 dark:text-neutral-700">_SYS</span>
    </a>

    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
        Current
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
        Forecast
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
        Radar
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
        Settings
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button class="text-blue-400 text-2xl focus:outline-none dark:text-cyan-400" aria-label="Toggle navigation">
        <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>
</nav>

Tooltip Component

A minimalist and flat design tooltip component for event/conference websites, featuring a black and white color scheme with a bright accent.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative group">
    <button class="px-6 py-3 bg-gray-800 text-white rounded-lg shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900 transition-colors duration-200">
      Hover for Info
    </button>
    <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 w-48 p-3 bg-gray-900 text-white text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto z-10 dark:bg-gray-100 dark:text-gray-900 dark:border dark:border-gray-200
                before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-8 before:border-t-gray-900 before:border-x-transparent before:border-b-transparent dark:before:border-t-gray-100">
      <p class="font-semibold mb-1 text-purple-400 dark:text-purple-600">Event Details</p>
      <p>This is important information about the conference event.</p>
      <div class="absolute -bottom-1 left-1/2 -ml-2 w-4 h-4 bg-gray-900 dark:bg-gray-100 transform rotate-45 pointer-events-none origin-bottom-left"></div>
    </div>
  </div>
</div>

1 ... 92 93 94 95 96 ... 335

Search Components

Categories

All Components

Sidebar Navigation Component

User Profiles Component

Luxury Gallery Component

CAPTCHA Component

Chat Window Component

Social Media Navigation

Maps Component

Playful_Consulting_Navigation_Component

Cyberpunk Weather Navigation

Tooltip Component