Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de incrustación de medios

Componente de incrustación de medios con microinteracciones, efectos responsivos y compatibilidad con temas oscuros. No se necesita Javascript.

Abrir Vista previa

                 <div class="w-full max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800 transform transition duration-500 hover:scale-105"> <div class="relative"> <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/300/200" alt="Media thumbnail"> <div class="absolute bottom-0 right-0 bg-black text-white text-xs px-2 py-1 m-2 rounded-md"> 2:30 </div> </div> <div class="p-4"> <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h3> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Channel Name</p> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-300"> <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"></path> </svg> <span class="text-xs">1.2K Views</span> </div> </div> <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 flex items-center justify-between"> <div class="flex items-center"> <img class="h-8 w-8 rounded-full object-cover mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"> <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Uploader Name</span> </div> <button class="text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition duration-300"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path> </svg> </button> </div> </div>

Tarjeta de diseño de materiales

Un componente de tarjeta de estilo Material Design con comportamiento responsivo y compatibilidad con el modo oscuro mediante CSS de Tailwind. Cuenta con efectos de elevación y ondulación, señales visuales.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
    <img class="object-cover object-center w-full h-56" src="https://picsum.photos/seed/material/400/300" alt="Card image">
    <div class="px-6 py-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante non diam consequat consectetur at et metus.</p>
    </div>
    <div class="px-6 py-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 1</button>
      <button class="px-4 py-2 ml-4 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 2</button>
    </div>
  </div>
</div>

Componente de menú desplegable

Un menú desplegable responsivo con diseño de Glassmorphism usando Tailwind CSS, compatible con el modo oscuro y con efectos de fondo borrosos.

Abrir Vista previa

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-opacity-30 bg-white dark:bg-opacity-30 dark:bg-gray-800 hover:bg-opacity-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="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.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

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

<style>
  .bg-opacity-30 {
    background-color: rgba(255, 255, 255, 0.3) !important;
  }
  .dark .bg-opacity-30 {
    background-color: rgba(55, 65, 81, 0.3) !important;
  }
  .backdrop-blur {
    backdrop-filter: blur(10px);
  }
</style>

<div class="absolute inset-0 rounded-md bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-blur border border-gray-300 dark:border-gray-700">
    <img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/200/100" alt="Placeholder image">
    <div class="absolute inset-0 flex items-center justify-center">
      <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
</div>

Componente de mapa del sitio

Un componente de mapa del sitio responsivo diseñado en modo oscuro con Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <ul class="space-y-3">
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Home</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>About Us</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Services</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Contact</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Privacy Policy</span>
            </a>
        </li>
    </ul>
    <div class="mt-5">
        <h3 class="text-xl font-semibold">Follow Us</h3>
        <ul class="flex space-x-4 mt-2">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
        </ul>
    </div>
</div>

Componente de botones para compartir en redes sociales

Un componente de botones para compartir en redes sociales con un diseño 3D que incorpora elementos tridimensionales para mayor profundidad y participación. Es compatible con temas oscuros con CSS.

Abrir Vista previa

                <div class="flex justify-center space-x-4 p-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
            <i class="fab fa-facebook-f"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
            <i class="fab fa-twitter"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
            <i class="fab fa-linkedin-in"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
            <i class="fab fa-instagram"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Componente de la galería de productos - Diseño de materiales

Un componente de la galería de productos inspirado en Material Design con diseño responsivo, efectos de desplazamiento y compatibilidad con temas oscuros. Utiliza Tailwind CSS.

Abrir Vista previa

                <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="dark:bg-gray-800 dark:text-white">
    <div class="-m-1 flex flex-wrap md:-m-2">
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=1"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=2"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=3"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=4"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=5"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=6"
          />
        </div>
      </div>
    </div>
  </div>
</div>

Componente de visor de 360°

Un componente de visor de 360° con diseño responsivo y soporte de temas oscuros usando Tailwind CSS. Utiliza CSS para animaciones e interacciones para una sensación de microinteracción. Sin JavaScript.

Abrir Vista previa

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="relative w-64 h-64">
    <div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 ease-in-out hover:rotate-180" style="background-image: url('https://picsum.photos/id/237/256/256');"></div>
    <div class="absolute inset-0 flex justify-center items-center opacity-0 hover:opacity-100 transition-opacity duration-300">
      <div class="text-white text-xl font-bold">View 360</div>
    </div>
  </div>
</div>

Componente de cuadro de búsqueda

Un componente de cuadro de búsqueda diseñado con el estilo Brutalismo mediante CSS de Tailwind. Cuenta con un diseño de alto contraste, efectos responsivos y admite temas oscuros.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg w-full max-w-md">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white text-center mb-4">Search</h2>
        <div class="flex items-center border-b border-gray-300 dark:border-gray-700 mb-4">
            <input type="text" placeholder="Type your search..." class="flex-1 bg-transparent text-gray-800 dark:text-white p-2 outline-none" />
            <button class="p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white rounded-r-lg">
                <span>🔍</span>
            </button>
        </div>
        <img src="https://picsum.photos/400/200" class="w-full rounded-lg shadow-md" alt="Random image" />
        <div class="flex justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-center mt-2">Explore and find information quickly.</p>
    </div>
</div>

Componente de incrustación de medios

Un componente de incrustación de medios responsivo con un estilo retro/vintage, compatible con temas oscuros y con imágenes y avatares de marcadores de posición.

Abrir Vista previa

                <div class="max-w-lg mx-auto bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800">
    <div class="relative">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=1" alt="Retro Media">
        <div class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 p-4">
            <h2 class="text-white text-xl font-bold">Retro Media Title</h2>
            <p class="text-gray-300">This is a description of the retro media.</p>
        </div>
    </div>
    <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Posted by</h3>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</p>
            </div>
        </div>
    </div>
    <style>
        @media (prefers-color-scheme: dark) {
            .bg-white {background-color: #1a202c;}
            .text-gray-800 {color: #e2e8f0;}
            .text-gray-300 {color: #edf2f7;}
        }
        
        .bg-black { background-color: rgba(0, 0, 0, 0.8); }
        .rounded-lg { border-radius: 0.5rem; }
        .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }
        
        .text-xl { font-size: 1.25rem; }
        .text-lg { font-size: 1.125rem; }
        .text-sm { font-size: 0.875rem; }
        
        @media (max-width: 640px) {
            .h-48 { height: 12rem; }
        }
    </style>
</div>

Componente de botones para compartir en redes sociales

Un componente receptivo de botones para compartir en redes sociales con un estilo de diseño esqueuomórfico que imita a sus contrapartes del mundo real, con soporte para temas oscuros.

Abrir Vista previa

                <div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
    <h2 class="text-lg font-bold">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
        </a>
    </div>
    <div class="text-sm text-gray-600 dark:text-gray-400">
        <p>Connect with us!</p>
    </div>
</div>

1 ... 280 281 282 283 284 ... 307

Categorías

Todos los componentes