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

Un composant de champ de recherche de style 3D conçu pour les sites Web d’entreprise et d’entreprise, doté d’une interface complexe avec de la profondeur, des éléments interactifs et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-gray-800 to-gray-700 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
    <h2 class="text-white text-2xl font-semibold mb-4">Search Our Resources</h2>
    <div class="relative w-full max-w-md">
        <input type="text" placeholder="Search..." class="w-full p-4 pl-10 text-gray-900 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-200" />
        <div class="absolute inset-y-0 left-0 flex items-center pl-3">
            <img src="https://picsum.photos/20/20" alt="Search Icon" class="w-5 h-5 text-gray-400 dark:text-gray-500" />
        </div>
    </div>
    <div class="flex justify-between items-center w-full mt-4">
        <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow hover:bg-blue-700 transition-all duration-200">Search</button>
        <button class="px-4 py-2 text-sm font-medium text-gray-200 dark:text-gray-400 hover:underline">Advanced Search</button>
    </div>
</div>

Composant de zone de recherche

Un composant de boîte de recherche rétro/vintage stylisé avec Tailwind CSS. Il présente un design réactif, une prise en charge des thèmes sombres et des images de remplacement.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Search</h2>
        <div class="relative">
            <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Type your query..." />
            <button class="absolute inset-y-0 right-0 flex items-center px-4 text-white bg-blue-600 hover:bg-blue-700 rounded-r-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
                <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="M11 4a7 7 0 100 14 7 7 0 000-14z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-10 flex">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg shadow-md ml-4" />
    </div>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md" />
        <p class="ml-2 text-gray-800 dark:text-white">User Name</p>
    </div>
</div>

Champ de recherche Brutalisme

Composant de boîte de recherche avec style Brutalism, réactif, prise en charge du thème sombre, pas de JS. Utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire.

Ouvrir Aperçu

                <div class="max-w-md mx-auto">
  <form class="flex items-center">
    <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-white dark:bg-gray-800 border border-black dark:border-white text-black dark:text-white text-sm font-mono focus:ring-black focus:border-black block w-full pl-10 p-2.5 transform -translate-x-1 -translate-y-1 dark:transform-none dark:translate-x-1 dark:translate-y-1 transition duration-100 ease-in-out" placeholder="Search anything..." required>
    </div>
    <button type="submit" class="p-2.5 ml-2 text-sm font-mono text-white bg-black border border-black hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-white dark:text-black dark:border-white dark:hover:bg-gray-200 dark:focus:ring-gray-800 transform translate-x-1 translate-y-1 dark:transform-none dark:-translate-x-1 dark:-translate-y-1 transition duration-100 ease-in-out">
      <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>
</div>

Boîte de recherche rétro

Boîte de recherche rétro/vintage avec esthétique des années 80/90, réactif, prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto">
  <div class="relative">
    <input type="text" class="w-full py-3 px-4 pr-10 text-sm text-gray-900 placeholder-gray-600 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent border-2 border-gray-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:border-gray-600 dark:focus:ring-purple-400" placeholder="Search...">
    <svg class="absolute right-3 top-3 w-5 h-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>

Composant de zone de recherche

Composant de boîte de recherche avec conception 3D, effets réactifs et prise en charge du thème 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"
      class="w-full px-5 py-3 text-gray-800 placeholder-gray-500 bg-white border border-gray-300 rounded-full shadow-lg dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 transition transform duration-300 ease-in-out hover:scale-105 focus:scale-105"
      placeholder="Search..."
    />
    <button
      class="absolute inset-y-0 right-0 flex items-center px-4 text-white bg-blue-600 rounded-r-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600 transition transform duration-300 ease-in-out hover:scale-105"
    >
      <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>
  </div>
</div>

Boîte de recherche skeuomorphe

Un composant de champ de recherche avec un design skeuomorphe qui imite les éléments du monde réel, avec une réactivité et une prise en charge du thème 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">
    <input type="text" class="p-4 pl-10 pr-4 text-gray-900 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400" placeholder="Search..." />
    <svg class="absolute left-3 top-3 w-5 h-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm4 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16z" />
    </svg>
  </div>
</div>

Composant de zone de recherche

Un composant de boîte de recherche conçu avec le style Brutalism à l’aide de Tailwind CSS. Dispose d’un design à contraste élevé, d’effets réactifs et prend en charge le thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg w-full max-w-md">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white text-center mb-4">Search</h2>
        <div class="flex items-center border-b border-gray-300 dark:border-gray-700 mb-4">
            <input type="text" placeholder="Type your search..." class="flex-1 bg-transparent text-gray-800 dark:text-white p-2 outline-none" />
            <button class="p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white rounded-r-lg">
                <span>🔍</span>
            </button>
        </div>
        <img src="https://picsum.photos/400/200" class="w-full rounded-lg shadow-md" alt="Random image" />
        <div class="flex justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-center mt-2">Explore and find information quickly.</p>
    </div>
</div>

Composant de zone de recherche

Composant de zone de recherche en mode sombre avec conception réactive et prise en charge du thème sombre. Aucun JavaScript n’est utilisé. Les images sont des images de substitution.

Ouvrir Aperçu

                <form class="flex items-center w-full max-w-md mx-auto mt-10">
  <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>

Boîte de recherche de la conception matérielle

Un composant de boîte de recherche inspiré des principes de conception matérielle, construit à l’aide de Tailwind CSS. Il présente un comportement réactif s’adaptant à la largeur du conteneur, un retour visuel via des transitions d’ombres de survol et de focus (effets de profondeur) et une prise en charge complète des thèmes sombres. Le composant comprend une icône de recherche principale et garantit une esthétique épurée et moderne. Implémentation CSS uniquement. Idéal pour l’intégration dans diverses dispositions en raison de sa nature « w-full ». Pour des raisons d’accessibilité, assurez-vous d’associer l’élément 'input' à un '<label>' correspondant ou de fournir une 'aria-label' descriptive.

Ouvrir Aperçu

                <!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
  <div class="pl-4 pr-2 py-3">
    <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" 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>
  <input
    type="search"
    name="search_query"
    id="material_search_box_input"
    placeholder="Search..."
    aria-label="Search"
    class="
      appearance-none
      w-full h-12
      pl-0 pr-4 py-3
      text-base text-gray-900 dark:text-gray-100
      bg-transparent
      focus:outline-none
      placeholder-gray-500 dark:placeholder-gray-400
    "
  />
</div>
<!-- Component End -->

Composant de zone de recherche

Un composant de champ de recherche réactif conçu selon les principes de Material Design, avec des styles CSS Tailwind et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 w-96">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Search</h2>
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 transition duration-150 ease-in-out" />
            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Search</button>
        </div>
        <div class="mt-4 text-center">
            <h3 class="text-gray-700 dark:text-gray-300">Looking for something specific?</h3>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Type and hit enter or click the search button.</p>
        </div>
    </div>
</div>