Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de contenedor

Un componente contenedor receptivo con microinteracciones que presenta animaciones atractivas que reaccionan a las acciones del usuario, admite el modo oscuro y usa Tailwind CSS.

Abrir Vista previa

                <div class="max-w-4xl mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:shadow-xl hover:scale-105">
    <div class="flex items-center p-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
      <div class="ml-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
      </div>
    </div>
    <img src="https://picsum.photos/800/400" alt="Placeholder Image" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
    <div class="p-4">
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Engaging Title</h3>
      <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition duration-200 ease-in-out">Learn More</button>
    </div>
  </div>
</div>

Componente de componentes de medios

Un componente multimedia responsivo inspirado en estilos de diseño retro/vintage, con una estética nostálgica de los años 80/90. Es compatible con el tema oscuro con Tailwind CSS e incluye imágenes de marcador de posición y avatares.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
    <img class="rounded-lg w-full h-48 object-cover mb-4" src="https://picsum.photos/seed/media/400/200" alt="Media Thumbnail">
    <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-200">Retro Media Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media component, capturing the essence of the nostalgia from the 80s and 90s.</p>
    <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <p class="text-gray-800 dark:text-gray-200 font-semibold">User Name</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Posted on March 1, 2023</p>
        </div>
    </div>
</div>

Componente de cargadores

Un componente de cargadores diseñado en el estilo Material Design con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center space-y-8 p-8 bg-gray-100 dark:bg-gray-800 min-h-screen">
    <!-- Circular Loader -->
    <div class="flex items-center justify-center">
        <div class="animate-spin rounded-full h-32 w-32 border-t-4 border-blue-500 border-solid dark:border-blue-300"></div>
    </div>

    <!-- Linear Loader -->
    <div class="w-full max-w-lg">
        <div class="h-2 bg-blue-500 rounded animate-pulse dark:bg-blue-300"></div>
    </div>

    <!-- Skeleton Loader -->
    <div class="flex space-x-4">
        <div class="h-12 w-12 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-4">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-4/5"></div>
        </div>
    </div>

    <!-- Image Loader -->
    <div class="w-64 h-48 bg-gray-200 dark:bg-gray-700 rounded shadow-md animate-pulse">
        <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-full object-cover rounded" />
    </div>

    <!-- Avatar Loader -->
    <div class="flex items-center space-x-4">
        <div class="h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4"></div>
        </div>
    </div>
</div>

Componente Mapas de calor

Un componente de mapas de calor responsivo diseñado con una estética retro/vintage, que incorpora soporte para temas oscuros. Cuenta con secciones para un título, un subtítulo y un mapa con áreas resaltadas con calor, con imágenes aleatorias adicionales y avatares para una apariencia nostálgica.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
    <h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
    <h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
    <div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
        <div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
                <ul class="mt-2 space-y-2">
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>

Componente de carrito de compras

Un componente de carrito de compras de estilo retro vintage con diseño receptivo y soporte para modo oscuro, que utiliza Tailwind CSS y presenta imágenes y avatares de marcador de posición.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold text-center text-black dark:text-white">Shopping Cart</h2>
    <ul class="mt-4">
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
    </ul>
    <div class="mt-4 flex justify-between">
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total:</p>
        <p class="text-lg font-bold text-gray-800 dark:text-gray-200">$99.97</p>
    </div>
    <button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md transition duration-300 ease-in-out">Checkout</button>
</div>

Componente Deslizador de carrusel

Un componente deslizante de carrusel receptivo diseñado en un estilo brutalista utilizando Tailwind CSS, con alto contraste, diseños inusuales y soporte para temas oscuros.

Abrir Vista previa

                <div class="relative w-full h-64 overflow-hidden bg-gray-800" data-theme="dark">
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="absolute w-full h-full bg-gray-800 transition duration-300 ease-in-out transform scale-110 opacity-75"></div>
        <div class="carousel-slide transition-all duration-500 ease-in-out transform space-x-4">
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1">
                <p class="text-white mt-2">Slide 1</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2">
                <p class="text-white mt-2">Slide 2</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3">
                <p class="text-white mt-2">Slide 3</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=4" alt="Carousel Image 4">
                <p class="text-white mt-2">Slide 4</p>
            </div>
        </div>
    </div>
    <button class="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❮
    </button>
    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❯
    </button>
</div>
<style>
    [data-theme="dark"] {
        background-color: #1a202c;
    }
</style>

Componente de diseño de cuadrícula

Un componente de diseño de cuadrícula minimalista con un diseño simple y limpio con efectos receptivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición y avatares de picsum.photos y randomuser.me.

Abrir Vista previa

                <div class="container mx-auto p-4">
    <h2 class="text-center text-2xl font-bold mb-4">Minimalist Grid Layout</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 4</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 5</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 6</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
    </div>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-700 { color: #edf2f7; }
    }
</style>

Componente de botones Me gusta/Reacción

Un componente de botones de Me gusta/Reacción diseñado en estilo Brutalismo con CSS de Tailwind, con efectos responsivos y soporte para temas oscuros.

Abrir Vista previa

                <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">React to this!</h2>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-500 rounded-md">
            👍 Like
        </button>
        <button class="bg-red-500 text-white font-bold py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-500 rounded-md">
            ❤️ Love
        </button>
        <button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-yellow-500 rounded-md">
            😂 Haha
        </button>
        <button class="bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-500 rounded-md">
            😮 Wow
        </button>
    </div>
    <div class="flex space-x-4">
        <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
        <img src="https://picsum.photos/40/40?random=1" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
        <img src="https://picsum.photos/40/40?random=2" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Barra de navegación minimalista

Un componente de barra de navegación receptivo diseñado en un estilo minimalista, compatible con el tema oscuro y que utiliza Tailwind CSS.

Abrir Vista previa

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/40/40" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8">
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Home</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">About</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Services</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</nav>

<!-- Mobile menu button -->
<div class="md:hidden">
  <button class="flex items-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" aria-label="Toggle Navigation">
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
    </svg>
  </button>
</div>

<!-- Mobile Menu -->
<div class="md:hidden">
  <div class="bg-white dark:bg-gray-800 shadow-md px-4 py-2 space-y-2">
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Home</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">About</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Services</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
  </div>
</div>

Volver al principio Componente de botón

Un componente de botón Volver al principio de estilo brutalista que usa Tailwind CSS. Este componente tiene un diseño audaz y de alto contraste y admite efectos responsivos y tema oscuro.

Abrir Vista previa

                <div class="fixed bottom-5 right-5">
    <a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
        <span class="text-xl">⬆️</span>
    </a>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }

    /* General styles */
    body {
        font-family: 'Courier New', Courier, monospace;
        background-color: white;
        color: black;
        transition: background-color 0.5s, color 0.5s;
    }
</style>

1 ... 285 286 287 288 289 ... 307

Categorías

Todos los componentes