Componentes de búsqueda

Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de mensajes de alerta

Un componente de mensaje de alerta minimalista diseñado para blogs, con un esquema de color en escala de grises. Incluye un título, un mensaje y un botón de cierre. Diseño responsivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-900 rounded-md shadow-lg max-w-md mx-auto mt-6">
    <div class="flex justify-between items-center w-full">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
            &times;
        </button>
    </div>
    <p class="mt-2 text-gray-600 dark:text-gray-400">
        This is a minimal alert message for your blog or content. It is meant to grab the reader's attention without being intrusive.
    </p>
    <div class="flex items-center mt-3">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-700 dark:text-gray-300 text-sm">Posted by John Doe</span>
    </div>
    <div class="flex justify-end mt-4">
        <button class="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">
            Action
        </button>
    </div>
</div>

Componente de reseñas de productos

Componente de reseñas de productos receptivo con diseño brutalista, combinación de colores monocromática, complejidad compleja para el comercio electrónico, con soporte de tema oscuro

Abrir Vista previa

                <div class="bg-gray-900 text-white p-8 min-h-screen">
  <div class="container mx-auto">
    <h2 class="text-4xl font-bold mb-8 border-b-4 border-yellow-400 pb-2 dark:border-yellow-600">Customer Reviews</h2>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- Review Card 1 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/75.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Sarah Johnson</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"This product is amazing! It exceeded my expectations."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">May 1, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">David Chen</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Absolutely love this! Highly recommended."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 28, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>
      
      <!-- Review Card 3 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/80.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Emily Davis</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Good value for the price."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 25, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>
      
       <!-- Review Card 4 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/60.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Michael Brown</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Solid product, works as expected."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 20, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>

    </div>
  </div>
</div>

Componente de menú desplegable

Un componente de menú desplegable responsivo diseñado con microinteracciones, un esquema de color análogo y soporte para temas oscuros, adecuado para un sitio web de portafolio.

Abrir Vista previa

                <div class="relative inline-block text-left">
  <div>
    <button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-800 text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="options-menu" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.29l3.71-3.08a.75.75 0 111 1.14l-4.25 3.5a.75.75 0 01-1 0l-4.25-3.5a.75.75 0 010-1.14z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-800 dark:ring-white dark:ring-opacity-20" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 block px-4 py-2 text-sm" role="menuitem">Your Profile</a>
      <a href="#" class="text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 block px-4 py-2 text-sm" role="menuitem">Settings</a>
      <a href="#" class="text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 block px-4 py-2 text-sm" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<!-- Microinteraction to show hover effect -->
<style>
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.hover-effect:hover {
  animation: fadeIn 0.3s;
}
</style>

<div class="hover-effect">
  <img class="w-full h-48 rounded-md object-cover" src="https://picsum.photos/id/1018/400/300" alt="Portfolio Image">
</div>

Componente de la barra lateral

Un componente de barra lateral simple y receptivo con un diseño brutalista, combinación de colores monocromática y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-white dark:bg-gray-950 dark:text-gray-200 flex flex-col">
    <div class="p-6 text-2xl font-bold border-b border-gray-700 dark:border-gray-800">BrutalNav</div>
    <nav class="flex-grow">
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Home</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">About</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Services</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
  </div>

  <!-- Content Area (placeholder) -->
  <div class="flex-grow p-10 text-gray-800 dark:text-gray-200">
    <h1 class="text-3xl font-bold mb-6">Main Content</h1>
    <p>This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

Componente de botones para compartir en redes sociales

Componente de botones para compartir en redes sociales con diseño brutalista, combinación de colores vibrantes y nivel de complejidad complejo para el comercio electrónico, con diseño receptivo y soporte de tema oscuro utilizando Tailwind CSS. Sin JavaScript.

Abrir Vista previa

                <div class="bg-yellow-400 p-6 min-h-screen flex items-center justify-center dark:bg-gray-900">
  <div class="flex flex-wrap space-x-4">
    <!-- Share Button 1 -->
    <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-red-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500">
      Share on X
    </button>

    <!-- Share Button 2 -->
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-blue-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-500">
      Share on Facebook
    </button>

    <!-- Share Button 3 -->
    <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-green-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-green-500">
      Share on LinkedIn
    </button>

    <!-- Share Button 4 -->
    <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-purple-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-500">
      Share on Pinterest
    </button>

    <!-- Share Button 5 -->
    <button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-pink-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-500">
      Copy Link
    </button>
  </div>
</div>

Componente de mensaje de error

Componente de mensaje de error refinado con skeuomorfismo, combinación de colores triádica y un diseño sencillo. Diseñado con Tailwind CSS para mayor capacidad de respuesta y compatibilidad con el modo oscuro. Sin JavaScript.

Abrir Vista previa

                <div class="max-w-md mx-auto p-6 bg-gradient-to-br from-red-500 via-black-500 to-blue-500 text-white font-sans rounded-lg shadow-lg dark:from-red-700 dark:via-black-700 dark:to-blue-700">
  <div class="flex items-center space-x-4">
    <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
    </svg>
    <div class="text-lg font-bold">Error</div>
  </div>
  <div class="mt-4 text-sm">
    <p>An unexpected error occurred. Please try again later.</p>
  </div>
</div>

Componente de formulario de inicio de sesión

Un formulario de inicio de sesión simple y receptivo diseñado con un estilo esqueuomórfico que imita elementos del mundo real utilizando una combinación de colores vibrantes. Es adecuado para interfaces de redes sociales y admite el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-800 dark:to-purple-900">  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2>    <div class="mt-6">      <div class="mb-4">        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>        <input type="email" id="email" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="you@example.com" required/>      </div>      <div class="mb-6">        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>        <input type="password" id="password" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="••••••••" required/>      </div>      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">Login</button>    </div>    <div class="mt-4 text-center">      <img src="https://picsum.photos/50/50" alt="Login Illustration" class="mx-auto rounded-full"/>    </div>    <div class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">      Don't have an account? <a href="#" class="text-blue-500 dark:text-blue-400">Sign up</a>    </div>  </div> </div>

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión simple diseñado en un estilo brutalista con tonos tierra, adecuado para fines de blog / contenido y optimizado para temas claros y oscuros.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-brown-500 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-3xl font-bold text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-white text-sm font-bold mb-2" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="username" type="text" placeholder="Enter your username" required />
            </div>
            <div class="mb-6">
                <label class="block text-white text-sm font-bold mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="password" type="password" placeholder="Enter your password" required />
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
            </div>
        </form>
    </div>
</div>

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsiva simple diseñado para sitios web de comercio electrónico, con un estilo de modo oscuro y un esquema de color análogo.

Abrir Vista previa

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
    <div class="relative w-full max-w-2xl">
        <button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
            &times;
        </button>
        <img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
        <div class="flex justify-between mt-4">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
        </div>
    </div>
</div>

Componentes funcionales Componente

Componente funcional para comercio electrónico con diseño responsivo y soporte de tema oscuro.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 179 180 181 182 183 ... 315

Componentes de búsqueda

Categorías

Todos los componentes