Componenti Casella di ricerca Semplice casella di ricerca pastello 3D

Semplice casella di ricerca pastello 3D

Un componente casella di ricerca reattivo con un design simile al 3D, una combinazione di colori pastello e il supporto per temi scuri, creato con Tailwind CSS per un blog/sito Web di contenuti.

Anteprima

Codice HTML

<body>
  <div class="min-h-screen bg-gradient-to-br from-pastel-pink-200 to-pastel-blue-200 dark:from-pastel-purple-900 dark:to-pastel-teal-900 p-8">
    <div class="max-w-md mx-auto">

      <!-- Simple Search Box -->
      <div class="relative transform translate-z-0 group">
        <input type="text" placeholder="Search..." class="w-full px-6 py-3 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-pastel-green-400 dark:focus:ring-pastel-teal-600 transition-all transform origin-center group-hover:-translate-y-1 group-hover:shadow-lg">
        <div class="absolute inset-0 border-2 border-pastel-green-400 dark:border-pastel-teal-600 rounded-lg pointer-events-none transform translate-z-0 group-hover:-translate-y-1"></div>
        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400 dark:text-gray-500 pointer-events-none" 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>
</body>

Componenti correlati

Componente Casella di ricerca skeuomorfa

Casella di ricerca skeuomorfa per i social media

Aperto

Neon_Glow_Search_Box

Un componente della casella di ricerca semplice e reattivo con effetti di bagliore al neon con blu elettrico e rosa acceso per applicazioni tecnologiche/SaaS, incluso il supporto della modalità scura.

Aperto

Bauhaus_Agriculture_Search_Box

Componente della casella di ricerca reattiva per siti Web di agricoltura/allevamento, progettato con i principi Bauhaus, toni seppia/marrone e supporto per la modalità scura.

Aperto