Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de componentes de medios

Un componente multimedia para el comercio electrónico con microinteracciones, combinación de colores en escala de grises, complejidad moderada, diseño receptivo y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
  <div class="relative">
    <img class="object-cover w-full h-48 transition-transform duration-300 transform group-hover:scale-105" src="https://picsum.photos/400/300?random=1"
      alt="Product Image">
    <div
      class="absolute top-0 left-0 flex items-center justify-center w-full h-full text-white transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
      <svg class="w-12 h-12" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
        </path>
      </svg>
    </div>
  </div>
  <div class="px-4 py-3">
    <h3 class="text-lg font-medium text-gray-800 dark:text-white">Product Name</h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Short product description goes here.</p>
    <div class="flex items-center justify-between mt-3">
      <span class="text-xl font-bold text-gray-800 dark:text-white">$29.99</span>
      <button
        class="px-3 py-2 text-xs font-medium text-white uppercase transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Reproductor de audio Glassmorphism

Reproductor de audio Glassmorphism con colores vibrantes para el tablero, responsivo con soporte para modo oscuro. Sin JavaScript.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg max-w-sm w-full border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4 mb-4">
      <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/id/1040/80/80" alt="Album Art">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Ocean Waves</h3>
        <p class="text-sm text-purple-700 dark:text-purple-300">Relaxation Sounds</p>
      </div>
    </div>
    <div class="relative mb-4">
      <div class="w-full bg-purple-200 rounded-full h-2 dark:bg-gray-600">
        <div class="bg-gradient-to-r from-indigo-500 to-pink-500 h-2 rounded-full" style="width: 70%;"></div>
      </div>
      <div class="flex justify-between text-xs text-purple-800 dark:text-purple-200 mt-1">
        <span>2:10</span>
        <span>3:05</span>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
      <button class="bg-gradient-to-r from-indigo-600 to-pink-600 text-white p-3 rounded-full shadow-lg focus:outline-none transform hover:scale-105 transition duration-300">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"></path>
        </svg>
      </button>
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Componente de menciones de usuario

Un componente de menciones de usuario receptivo con diseño de Glassmorphism, combinación de colores complementaria y compatibilidad con modo oscuro, adecuado para sitios web comerciales.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
  <div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl p-6 w-full max-w-sm border border-white border-opacity-30 dark:border-gray-700 shadow-lg">
    <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 text-center">User Mentions</h3>
    <div class="space-y-4">
      
      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">John Doe <span class="text-sm text-gray-100 dark:text-gray-300">(CEO)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Mentioned you in a project update.</p>
        </div>
      </div>

      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">Jane Smith <span class="text-sm text-gray-100 dark:text-gray-300">(Designer)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Asked your opinion on a new design.</p>
        </div>
      </div>

      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/18.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">Robert Brown <span class="text-sm text-gray-100 dark:text-gray-300">(Developer)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Assigned you a task in Jira.</p>
        </div>
      </div>

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

Componente de restablecimiento de contraseña

Componente de restablecimiento de contraseña skeuomórfico para redes sociales con esquema de color análogo y soporte de modo oscuro.

Abrir Vista previa

                <div class="min-h-screen py-6 flex flex-col justify-center sm:py-12 bg-gradient-to-br from-blue-100 via-blue-200 to-cyan-100 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-cyan-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Password Reset</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7 dark:text-gray-200">
            <p>Enter your email to receive a password reset link.</p>
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-gray-100 dark:focus:border-blue-500" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
            </div>
            <div class="relative">
              <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 shadow-md">Reset Password</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Retro_Back_To_Top_Button

Retro/Vintage - Componente de botón nostálgico Volver al principio para el consumo de blog/contenido con esquema de color análogo. Diseño complejo con soporte de modo responsivo y oscuro.

Abrir Vista previa

                <div class="fixed bottom-5 right-5">
  <a href="#"
    class="group flex items-center justify-center p-4 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 text-white shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:from-purple-700 dark:via-pink-700 dark:to-red-700 dark:focus:ring-purple-800"
    aria-label="Back to top">
    <svg class="h-8 w-8 transition-transform duration-300 group-hover:-translate-y-1" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </a>
</div>

Componente de autenticación de dos factores

Componente de autenticación de dos factores Glassmorphism para el tablero con esquema de color complementario y soporte de modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-dark to-purple-light dark:from-gray-900 dark:to-black">
  <div class="relative p-8 rounded-xl shadow-lg bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-opacity-20 border-white max-w-md w-full mx-4">
    <div class="absolute inset-0 bg-white bg-opacity-5 dark:bg-black dark:bg-opacity-5 rounded-xl pointer-events-none"></div>
    
    <h2 class="text-3xl font-bold text-white mb-6 text-center">🔐 Two-Factor Authentication</h2>
    
    <p class="text-white text-opacity-80 mb-8 text-center">Please enter the 6-digit code from your authenticator app.</p>
    
    <div class="flex justify-center space-x-4 mb-8">
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
    </div>
    
    <button class="w-full py-3 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-70 dark:bg-purple-700 dark:hover:bg-purple-800">
      Verify Code
    </button>
    
    <p class="text-white text-opacity-70 text-center mt-6 text-sm">
      Didn

Componente de formas de vidrio

Componente de formularios de Glassmorphism con tonos tierra, diseño responsivo y soporte de tema oscuro para un sitio web de blog/contenido.

Abrir Vista previa

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-8 w-full max-w-md border border-stone-200 dark:border-stone-700">
    <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center">Contact Us</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-6">
        <label for="message" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Message</label>
        <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400"></textarea>
      </div>
      <button type="submit" class="w-full bg-stone-700 dark:bg-stone-600 text-white py-3 rounded-lg font-semibold hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-stone-400">
        Send Message
      </button>
    </form>
  </div>
</div>

Componente de mapa esqueuomórfico

Un componente de mapa simple y receptivo con un diseño esqueuomórfico, combinación de colores en tonos tierra y compatibilidad con modo oscuro, adecuado para una cartera.

Abrir Vista previa

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-200 to-stone-400 dark:from-stone-800 dark:to-stone-950 shadow-2xl rounded-3xl border-4 border-stone-500 dark:border-stone-700 max-w-4xl mx-auto my-8"> <div class="w-full h-64 md:h-96 rounded-2xl overflow-hidden border-2 border-stone-600 dark:border-stone-400 shadow-inner"> <img src="https://picsum.photos/seed/map/800/600" alt="Skeuomorphic Map" class="w-full h-full object-cover grayscale brightness-90 contrast-120"> </div> <div class="mt-6 text-center"> <h3 class="text-2xl md:text-3xl font-serif text-stone-800 dark:text-stone-200 drop-shadow-md">Location Details</h3> <p class="mt-2 text-md md:text-lg text-stone-700 dark:text-stone-300 font-sans">123 Rustic Road, Earthville</p> <button class="mt-5 px-6 py-3 bg-gradient-to-r from-amber-700 to-amber-900 text-white font-bold rounded-full shadow-lg hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50 transition transform hover:-translate-y-1 active:translate-y-0"> View Large Map </button> </div> <div class="mt-8 flex justify-around items-center px-4"> <div class="text-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Explorer </p> </div> <div class="text-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Cartographer </p> </div> </div> </div>

Barra de progreso de pedidos de comercio electrónico

Un componente de barra de progreso receptivo para comercio electrónico con soporte para modo oscuro, con un diseño monocromático. Sin JavaScript, solo HTML y Tailwind CSS.

Abrir Vista previa

                <div class="dark:bg-gray-900 min-h-screen p-4 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Order Progress</h2>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Order Placed</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">100%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Processing</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Shipped</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Out for Delivery</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">25%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%;"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Delivered</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">0%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%;"></div>
      </div>
    </div>
  </div>
</div>

SuccessMessagesComponent

Un componente de mensaje de éxito simple para el comercio electrónico, con una estética de diseño de material monocromática, diseño receptivo y soporte de tema oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="text-center">
      <div class="mb-4 text-green-500 mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Order Confirmed!</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Your order #12345 has been successfully placed.</p>
      <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
        Continue Shopping
      </button>
    </div>
  </div>
</div>

1 ... 70 71 72 73 74 ... 282

Categorías

Todos los componentes