Boîte de recherche

Composant de boîte de recherche skeuomorphe

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

                <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 l’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 l’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 l’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 l’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 l’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 l’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>

Composant de zone de recherche

Composant de boîte de recherche réactif avec prise en charge du thème sombre, palette de couleurs des tons de terre et design minimal.

Ouvrir l’aperçu

                <form class="flex items-center w-full max-w-md mx-auto">
  <label for="simple-search" class="sr-only">Search</label>
  <div class="relative w-full">
    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
    </div>
    <input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
  </div>
  <button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
    <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    <span class="sr-only">Search</span>
  </button>
</form>

Composant de zone de recherche

Une boîte de recherche réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <form class="flex items-center w-full max-w-md mx-auto">
    <label for="search" class="sr-only">Search</label>
    <div class="relative w-full">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg">
                <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"></path>
            </svg>
        </div>
        <input type="text" id="search"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-stone-500 focus:border-stone-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-stone-500 dark:focus:border-stone-500"
            placeholder="Search..." required>
    </div>
    <button type="submit"
        class="p-2.5 ml-2 text-sm font-medium text-white bg-stone-700 rounded-lg border border-stone-700 hover:bg-stone-800 focus:ring-4 focus:outline-none focus:ring-stone-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:focus:ring-stone-800">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z">
            </path>
        </svg>
    </button>
</form>

Composant de zone de recherche

Un composant de champ de recherche complexe conçu dans un style brutaliste avec une palette de couleurs pastel, adapté aux interfaces de médias sociaux. Le composant comprend des éléments interactifs tels que la saisie de recherche, des filtres et un bouton d’envoi, tous prenant en charge le mode sombre.

Ouvrir l’aperçu

                <div class="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">Search</h2>
    <form class="flex flex-col space-y-4">
        <input type="text" placeholder="Search..." class="p-4 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition duration-200" />
        <div class="flex flex-wrap justify-between">  
            <select class="w-full md:w-auto p-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 focus:outline-none dark:bg-gray-700 dark:text-white">
                <option value="all">All</option>
                <option value="images">Images</option>
                <option value="videos">Videos</option>
                <option value="users">Users</option>
            </select>
            <button class="flex items-center justify-center w-full md:w-auto p-3 bg-pink-500 dark:bg-pink-700 text-white rounded-lg shadow hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-200">
                <svg class="w-5 h-5 mr-2" 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-4a9 9 0 10-6 0 9 9 0 006 0z" />
                </svg>
                Search
            </button>
        </div>
    </form>
    <div class="mt-6 bg-gray-100 dark:bg-gray-900 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
        <h3 class="text-gray-700 dark:text-white mb-2">Featured Users</h3>
        <div class="flex items-center space-x-3">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User1</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User2</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User3</span>
        </div>
    </div>
</div>

Catégories