Rechercher des composants

Catégories

Composants Boîte de recherche

Boîte de recherche

Permet aux utilisateurs de rechercher le contenu d’un site Web

Composant de zone de recherche

Composant de zone de recherche avec interface utilisateur en mode sombre, schéma de couleurs monochromatique et complexité modérée pour les médias sociaux à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Search Your Friends
      </h2>
    </div>
    <div class="mt-8 relative">
      <input type="text" placeholder="Search..." class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md mt-4">
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@johndoe</p>
          </div>
        </li>
        <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@janesmith</p>
          </div>
        </li>
         <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">Peter Jones</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@peterj</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Boîte de recherche Glassmorphism

Un composant de boîte de recherche glassmorphism simple et réactif avec des couleurs en niveaux de gris, adapté à un tableau de bord. Prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md">
    <input type="text" placeholder="Search..." class="w-full py-3 px-5 pr-12 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 transition duration-300 ease-in-out"
    />
    <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
      <svg class="h-5 w-5 text-gray-600 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>
</div>

Composant de zone de recherche

Un composant de champ de recherche réactif pour les sites Web d’entreprise, doté de micro-interactions et d’une palette de couleurs analogue. Il comprend une entrée de recherche, un bouton et une liste déroulante de résultats dynamique avec des avatars d’utilisateur et du texte, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md">
    <div class="relative flex items-center w-full h-12 rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden group">
      <div class="grid place-items-center h-full w-12 text-gray-300 dark:text-gray-600">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>

      <input
        class="peer h-full w-full outline-none text-sm text-gray-700 dark:text-gray-200 pr-2 bg-white dark:bg-gray-800 transition-all duration-300 focus:w-[calc(100%-3rem)]"
        type="text"
        id="search-input"
        placeholder="Search for services, products, or people..." />

      <button class="absolute right-0 h-full w-12 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white rounded-r-lg flex items-center justify-center transition-all duration-300 group-focus-within:w-24 group-focus-within:bg-blue-600 group-focus-within:dark:bg-blue-800">
        <span class="hidden group-focus-within:block text-sm">Search</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 group-focus-within:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </button>
    </div>

    <!-- Search Results Dropdown -->
    <div class="absolute w-full mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden opacity-0 scale-y-0 transform origin-top transition-all duration-300 group-focus-within:opacity-100 group-focus-within:scale-y-100">
        <ul class="py-2">
            <!-- Result Item 1 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Software Engineer at TechCorp</p>
                </div>
            </li>
            <!-- Result Item 2 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Marketing Manager at GlobalBiz</p>
                </div>
            </li>
            <!-- Result Item 3 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Company XYZ Services</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Cloud Computing Solutions</p>
                </div>
            </li>
            <!-- Result Item 4 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1018/100/100" alt="Product Image">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Product A</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Advanced Analytics Platform</p>
                </div>
            </li>
            <!-- Result Item 5 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1015/100/100" alt="Service Image">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Consulting Services</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Strategic Business Consultation</p>
                </div>
            </li>
        </ul>
    </div>
  </div>
</div>

Composant de boîte de recherche skeuomorphe

Boîte de recherche skeuomorphique pour les médias sociaux

Ouvrir Aperçu

                <div class="p-8 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center">
    <div class="relative w-full max-w-md">
        <!-- Outer Bevel/Shadow -->
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-500 dark:from-gray-700 dark:to-black rounded-full shadow-xl animate-pulse-light dark:animate-pulse-dark"></div>

        <!-- Inner Concave Effect -->
        <div class="relative flex items-center bg-gray-300 dark:bg-gray-800 rounded-full p-2 shadow-inner-concave dark:shadow-inner-concave-dark">
            <input type="text" placeholder="Search your friends, posts, or groups..." class="flex-grow py-3 pl-6 pr-4 bg-transparent text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 text-lg sm:text-xl font-medium tracking-wide" />
            
            <!-- Search Button -->
            <button class="relative w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-700 dark:to-indigo-800 rounded-full flex items-center justify-center shadow-neumorphic-btn dark:shadow-neumorphic-btn-dark hover:from-blue-600 hover:to-indigo-700 dark:hover:from-blue-800 dark:hover:to-indigo-900 transition-all duration-300 transform active:scale-95">
                <svg class="w-7 h-7 text-white" 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>
            </button>
        </div>
    </div>

    <!-- Hidden custom styles for shadows (usually in CSS file or <style> tag) -->
    <style>
        /* Light Mode Inner Concave Shadow */
        .shadow-inner-concave {
            box-shadow: inset 8px 8px 15px #a7a7a7, inset -8px -8px 15px #ffffff;
        }

        /* Dark Mode Inner Concave Shadow */
        .dark .shadow-inner-concave-dark {
            box-shadow: inset 8px 8px 15px #4a4a4a, inset -8px -8px 15px #2a2a2a;
        }

        /* Light Mode Neumorphic Button Shadow */
        .shadow-neumorphic-btn {
            box-shadow: 6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff;
        }

        /* Dark Mode Neumorphic Button Shadow */
        .dark .shadow-neumorphic-btn-dark {
            box-shadow: 6px 6px 12px #2a2a2a, -6px -6px 12px #6a6a6a;
        }

        /* Animation for outer bevel light mode */
        @keyframes pulse-light {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.02); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }
        .animate-pulse-light {
            animation: pulse-light 4s infinite ease-in-out;
        }

        /* Animation for outer bevel dark mode */
        @keyframes pulse-dark {
            0% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.02); opacity: 0.9; }
            100% { transform: scale(1); opacity: 0.6; }
        }
        .dark .animate-pulse-dark {
            animation: pulse-dark 4s infinite ease-in-out;
        }

        /* Responsive adjustments */
        @media (max-width: 640px) {
            .shadow-inner-concave, .dark .shadow-inner-concave-dark {
                box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
            }
            .dark .shadow-inner-concave-dark {
                box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2a2a2a;
            }
            .shadow-neumorphic-btn, .dark .shadow-neumorphic-btn-dark {
                box-shadow: 4px 4px 8px #9a9a9a, -4px -4px 8px #ffffff;
            }
            .dark .shadow-neumorphic-btn-dark {
                box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #6a6a6a;
            }
            .w-14 {
                width: 3.5rem; /* ~56px */
            }
            .h-14 {
                height: 3.5rem; /* ~56px */
            }
            .p-8 {
                padding: 1rem;
            }
        }
    </style>
</div>

Composant de zone de recherche

Un composant de champ de recherche réactif avec un design minimaliste/plat, une palette de couleurs vives et des interactions complexes, adapté aux sites Web d’entreprise. Il prend en charge le mode sombre et est construit avec Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Search for Services</h2>

    <!-- Search Input with Advanced Options -->
    <div class="relative mb-6">
      <input type="text" placeholder="Search..." class="w-full py-3 pl-4 pr-12 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300">
      <button class="absolute inset-y-0 right-0 flex items-center pr-4 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </button>
    </div>

    <!-- Filter and Sort Options -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</label>
        <select id="category" class="w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500">
          <option>All Categories</option>
          <option>Marketing</option>
          <option>Development</option>
          <option>Design</option>
          <option>Consulting</option>
        </select>
      </div>
      <div>
        <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
        <select id="sort" class="w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500">
          <option>Relevance</option>
          <option>Date Posted</option>
          <option>Rating</option>
        </select>
      </div>
    </div>

    <!-- Price Range Slider (Conceptual - without JS) -->
    <div class="mb-6">
      <label for="price-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Price Range</label>
      <div class="flex items-center space-x-4">
        <span class="text-gray-600 dark:text-gray-400">$50</span>
        <input type="range" id="price-range" min="0" max="1000" value="500" class="w-full h-2 bg-purple-300 dark:bg-purple-700 rounded-lg appearance-none cursor-pointer thumb-purple-500 dark:thumb-purple-400">
        <span class="text-gray-600 dark:text-gray-400">$1000+</span>
      </div>
    </div>

    <!-- Tags/Keywords Input -->
    <div class="mb-6">
      <label for="keywords" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keywords</label>
      <input type="text" id="keywords" placeholder="Enter keywords (e.g.,

Composant de zone de recherche

Un composant de boîte de recherche complexe de style Glassmorphism avec une palette de couleurs analogue, adapté à un portfolio, avec un design réactif et une prise en charge du thème sombre utilisant uniquement HTML et Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="relative w-full max-w-2xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-2xl p-6 border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700"><div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-blue-500 dark:from-purple-700 dark:to-blue-900 opacity-20 rounded-2xl"></div><div class="relative z-10 flex items-center space-x-4"><svg class="h-8 w-8 text-gray-800 dark:text-gray-200" 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><input type="text" placeholder="Search your projects, skills, or articles..." class="flex-1 p-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-xl text-gray-900 dark:text-white placeholder-gray-700 dark:placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300 ease-in-out border border-gray-300 dark:border-gray-600"></div><div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Recent Searches</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#WebDesign</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#FrontEndDev</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#UIUX</span></div><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Popular Categories</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Development</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Design</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Marketing</span></div></div><div class="mt-6 text-center"><button class="px-6 py-3 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold rounded-full shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">Advanced Search</button></div></div></div>

Boîte de recherche brutaliste

Un composant de champ de recherche brutaliste avec des couleurs vives et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono"><div class="w-full max-w-md bg-white dark:bg-stone-800 shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_cyan] border-4 border-black dark:border-cyan-400 rounded-none overflow-hidden"><div class="bg-red-500 dark:bg-purple-600 p-4 border-b-4 border-black dark:border-cyan-400"><h2 class="text-xl text-black dark:text-white uppercase font-bold text-center">Search the Void</h2></div><div class="p-6"><div class="flex"><input type="text" placeholder="Enter query..." class="flex-grow p-4 border-4 border-black dark:border-cyan-400 bg-yellow-300 dark:bg-teal-300 text-black placeholder-gray-800 dark:placeholder-gray-900 focus:outline-none focus:bg-yellow-400 dark:focus:bg-teal-400 rounded-none text-lg"><button class="ml-4 px-6 py-4 bg-lime-500 dark:bg-fuchsia-600 text-black dark:text-white uppercase font-bold border-4 border-black dark:border-cyan-400 shadow-[4px_4px_0_black] dark:shadow-[4px_4px_0_cyan] hover:shadow-[2px_2px_0_black] dark:hover:shadow-[2px_2px_0_cyan] hover:translate-x-0.5 hover:translate-y-0.5 transition-all duration-150 rounded-none">GO</button></div><div class="mt-6 text-sm text-gray-700 dark:text-gray-300 border-t-2 border-dashed border-gray-400 dark:border-gray-600 pt-4"><p>Explore the depths of information. Beware of lurking data. Access granted.</p></div></div></div><div class="mt-8 text-center"><label for="dark-mode-toggle" class="inline-flex items-center cursor-pointer"><input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')"><div class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-black dark:peer-focus:ring-cyan-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-black dark:peer-checked:bg-cyan-500"></div><span class="ml-3 text-sm font-medium text-black dark:text-white uppercase">Dark Mode</span></label></div></div>

Composant de zone de recherche

Un composant de champ de recherche réactif avec un design brutaliste, utilisant une palette de couleurs complémentaires adaptée aux sites Web d’entreprise.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-800 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-white mb-4">Find What You Need</h1>
    <div class="flex items-center border-b-2 border-yellow-400 dark:border-blue-400">
        <input type="text" placeholder="Search..." class="p-2 bg-gray-700 dark:bg-gray-800 text-yellow-400 dark:text-blue-400 placeholder-yellow-300 placeholder-opacity-50 dark:placeholder-blue-300 dark:placeholder-opacity-50 outline-none w-full" />
        <button class="bg-yellow-400 dark:bg-blue-400 text-gray-900 dark:text-white font-bold p-2 ml-2 hover:bg-yellow-500 dark:hover:bg-blue-500 transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Search" class="w-4 h-4 inline-block" />
        </button>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Random Image" class="w-full max-w-md rounded-lg shadow-lg" />
    </div>
</div>

Composant de zone de recherche

Un composant de champ de recherche réactif conçu avec le style glassmorphism, prenant en charge le mode sombre et adapté aux applications de commerce électronique.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="relative">
        <input type="text" placeholder="Search for products..." class="w-full md:w-96 p-4 border border-transparent rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-transparent focus:ring focus:ring-opacity-50 backdrop-blur-md bg-opacity-30 shadow-lg">
        <button class="absolute right-0 top-0 bottom-0 flex items-center px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded-r-lg border border-transparent backdrop-blur-md bg-opacity-30">
            <img src="https://picsum.photos/20/20" alt="search icon" class="w-5 h-5" />
        </button>
    </div>
</div>
<div class="mt-4 text-center text-gray-700 dark:text-gray-300">
    <h2 class="text-xl font-semibold">Explore Our Products</h2>
    <div class="flex justify-center mt-2 space-x-4">
        <img src="https://picsum.photos/200/100" alt="Product 1" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
        <img src="https://picsum.photos/200/100?random=1" alt="Product 2" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
        <img src="https://picsum.photos/200/100?random=2" alt="Product 3" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
    </div>
</div>

Composant de la boîte de recherche Glassmorphism

Un composant de boîte de recherche moderne avec un effet de verre dépoli (glassmorphism) utilisant des couleurs pastel. Le composant est simple mais élégant, conçu pour les sites Web d’entreprise professionnels. Il présente un arrière-plan translucide avec des effets de flou subtils, un design réactif et une prise en charge du mode sombre. La boîte de recherche comprend une icône de recherche et un champ de saisie propre qui s’adapte bien aux environnements d’entreprise.

Ouvrir Aperçu

                <!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
  <!-- Search Container with Glassmorphism Effect -->
  <div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
    <!-- Search Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <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" />
    </svg>
    
    <!-- Search Input -->
    <input 
      type="text" 
      placeholder="Search..." 
      class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
    >
    
    <!-- Optional Clear Button -->
    <button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
  
  <!-- Optional Hint Text -->
  <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
    Search for products, services, or information
  </div>
</div>