Componenti Casella di ricerca Casella di ricerca Glassmorphism

Casella di ricerca Glassmorphism

Un componente della casella di ricerca glassmorphism semplice e reattivo con colori in scala di grigi, adatto per una dashboard. Supporta la modalità oscura.

Anteprima

Codice HTML

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

Componenti correlati

Casella di ricerca organica ispirata alla natura

Un componente della casella di ricerca semplice e reattivo con un design organico ispirato alla natura e una sfumatura arcobaleno, adatto per siti web aziendali o aziendali. Include il supporto per la modalità oscura.

Aperto

Componente Casella di ricerca

Un componente della casella di ricerca complessa in stile Glassmorphism con combinazione di colori analoga, adatto per un portfolio, con design reattivo e supporto per temi scuri utilizzando solo HTML e Tailwind CSS.

Aperto

Componente Casella di ricerca

Una casella di ricerca reattiva con supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto