Componentes Cuadro de búsqueda Cuadro de búsqueda simple de pastel en 3D

Cuadro de búsqueda simple de pastel en 3D

Un componente de cuadro de búsqueda responsivo con un diseño similar al 3D, combinación de colores pastel y compatibilidad con temas oscuros, creado con Tailwind CSS para un sitio web de blog/contenido.

Vista previa

Código 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>

Componentes relacionados

Componente de cuadro de búsqueda

Un componente de cuadro de búsqueda receptivo con un diseño minimalista/plano, combinación de colores vibrantes e interacciones complejas, adecuado para sitios web comerciales/corporativos. Es compatible con el modo oscuro y está construido con Tailwind CSS.

Abrir

Componente de cuadro de búsqueda

Componente de cuadro de búsqueda con diseño 3D, efectos responsivos y compatibilidad con temas oscuros.

Abrir

Componente de cuadro de búsqueda

Un componente de cuadro de búsqueda retro/vintage con estilo Tailwind CSS. Cuenta con un diseño responsivo, compatibilidad con temas oscuros e imágenes de marcador de posición.

Abrir