Componentes de búsqueda

Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de menciones de usuario

Un usuario responsivo menciona un componente diseñado para el modo oscuro con soporte CSS de Tailwind.

                <div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold mb-2">Mentions</h2>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">John Doe</p>
            <p class="text-gray-400 text-sm">@johndoe</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Jane Smith</p>
            <p class="text-gray-400 text-sm">@janesmith</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Mike Johnson</p>
            <p class="text-gray-400 text-sm">@mikejohnson</p>
        </div>
    </div>
    <a href="#" class="text-blue-400 hover:underline">View more mentions</a>
</div>
<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
        }
    }
</style>

Componente de diseño de cuadrícula 7

Un componente de diseño de cuadrícula receptivo diseñado en estilo brutalismo con Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición aleatorio.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-4xl font-extrabold text-black dark:text-white mb-6">Brutalism Grid Layout</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 1</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 1.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 2</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 2.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 3</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 3.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 4</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 4.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=5" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 5</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 5.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=6" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 6</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 6.</p>
        </div>
    </div>
</div>

Reseñas de productos Componente 6

Un componente de revisión de productos responsivo diseñado con los principios de Material Design, que admite temas claros y oscuros.

Abrir Vista previa

                <div class="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Reviews</h2>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">John Doe</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">5/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">This product is amazing! Highly recommend it to everyone.</p>
                </div>
            </div>
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">Jane Smith</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">4/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">Good quality, but the shipping took too long.</p>
                </div>
            </div>
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">Mike Johnson</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">3/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">It works fine, but I've seen better products in this range.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Add a Review</h3>
        <textarea class="w-full mt-2 p-2 border border-gray-300 rounded-md dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Write your review..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md py-2 px-4 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Submit</button>
    </div>
</div>

Menú desplegable Componente 5

Un componente de menú desplegable responsivo diseñado para el modo oscuro, que utiliza Tailwind CSS para el estilo y el diseño. El componente presenta un diseño elegante, efectos de desplazamiento y soporte para temas oscuros, lo que garantiza una experiencia de interfaz de usuario moderna.

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-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.23 7.21a.75.75 0 011.06 0L10 10.293l3.71-3.09a.75.75 0 111.02 1.1l-4 3.333a.75.75 0 01-1.02 0l-4-3.333a.75.75 0 010-1.1z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg 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="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        Profile
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
        Settings
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://picsum.photos/id/1/200/200" alt="Placeholder" />
        My Images
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://picsum.photos/id/2/200/200" alt="Placeholder" />
        Logout
      </a>
    </div>
  </div>
</div>

Componente CAPTCHA brutalista

Un componente CAPTCHA diseñado en un estilo brutalista, con alto contraste, diseños inusuales y efectos responsivos con soporte para temas oscuros.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-black">
        <h2 class="text-xl font-bold text-black dark:text-white mb-4">Verify You Are Human</h2>
        <div class="flex items-center justify-between mb-4">
            <img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-full border border-black dark:border-white">
            <span class="text-lg font-bold text-black dark:text-white">Are you a robot?</span>
        </div>
        <div class="flex flex-col items-center mb-4">
            <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-lg border border-black dark:border-white">
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Select the images that contains a cat.</p>
        </div>
        <div class="flex space-x-4">
            <button class="flex-1 bg-black text-white font-bold py-2 rounded-lg shadow-md hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">Verify</button>
            <button class="flex-1 bg-red-600 text-white font-bold py-2 rounded-lg shadow-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 transition">Cancel</button>
        </div>
    </div>
</div>

Componente 3 del reproductor de vídeo

Un componente de reproductor de vídeo responsivo diseñado en estilo Neumorphism con soporte para temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl p-6 w-full max-w-md">
        <div class="video-container rounded-2xl overflow-hidden">
            <img src="https://picsum.photos/600/400?random=1" alt="Video Thumbnail" class="w-full h-full object-cover">
            <div class="play-button bg-gray-300 dark:bg-gray-700 rounded-full p-2 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-5.4 3.24a1 1 0 01-1.552-.832V9.664a1 1 0 011.552-.832l5.4 3.24a1 1 0 010 1.664z" />
                </svg>
            </div>
        </div>
        <div class="mt-4 text-gray-800 dark:text-gray-200 text-lg font-semibold">Video Title</div>
        <div class="text-gray-600 dark:text-gray-400">Video description goes here. This is a brief overview of the content of the video.</div>
        <div class="flex items-center justify-between mt-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
                <span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
            </div>
            <div class="text-gray-600 dark:text-gray-400">10:30</div>
        </div>
    </div>
</div>

Componentes de medios Componente 2

Un componente multimedia de estilo retro/vintage con un diseño nostálgico inspirado en la estética de los años 80/90, con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.

Abrir Vista previa

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/retro/400/300" alt="Retro Image">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample text for the media component, showcasing a retro design that brings back memories from the 80s and 90s.</p>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-semibold">Read More</a>
    </div>
</div>

Componente 1 del visor de archivos

Un componente de visor de archivos minimalista diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros. Muestre archivos con un diseño limpio, incluidos marcadores de posición para imágenes y avatares de usuario.

Abrir Vista previa

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Last Updated: 2023-10-01</p>
            </div>
        </div>
        <div class="flex justify-center">
            <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/seed/picsum/400/250" alt="Placeholder Image">
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">File Name: <span class="font-semibold">example-file.pdf</span></p>
            <p class="text-gray-700 dark:text-gray-300">File Size: <span class="font-semibold">1.2 MB</span></p>
            <p class="text-gray-700 dark:text-gray-300">Uploaded On: <span class="font-semibold">2023-09-25</span></p>
        </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 text-center">
        <button class="bg-blue-500 text-white rounded-md py-2 px-4 transition duration-200 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Download</button>
    </div>
</div>

Componente 1 de los botones OAuth

Un componente que muestra botones OAuth con animaciones atractivas y compatibilidad con el modo oscuro, utilizando Tailwind CSS para el diseño. Los botones responden a las acciones del usuario con microinteracciones sutiles, y se incluyen imágenes de fuentes de marcadores de posición aleatorios.

Abrir Vista previa

                <div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Google
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Facebook
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Twitter
    </button>
</div>
<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        button {
            background-color: #1e3a8a;
        }
    }
</style>

Barra de navegación de degradado vidrioso

Esta barra de navegación presenta un moderno diseño acristalado, que combina colores degradados y un efecto de vidrio esmerilado para mantener un efecto translúcido mientras se desplaza.

Abrir Vista previa

                <nav class="fixed w-full backdrop-blur-lg bg-gradient-to-r from-purple-500/30 via-pink-500/30 to-indigo-500/30 border-b border-white/10 transition-all duration-300 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center">
          <span class="text-white font-bold text-xl tracking-wider">PRISM</span>
          <div class="ml-2 h-8 w-8 rounded-full bg-white/20 flex items-center justify-center">
            <div class="h-4 w-4 bg-white rounded-full animate-pulse"></div>
          </div>
        </a>
      </div>
      
      <!-- Menu Items -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-8">
          <a href="#" class="group relative px-3 py-2 text-white font-medium">
            Home
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            Features
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            Pricing
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            About
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
        </div>
      </div>
      
      <!-- CTA Button -->
      <div>
        <button class="relative overflow-hidden px-6 py-2 bg-white/10 border border-white/20 rounded-full text-white font-medium hover:bg-white/20 transition-all duration-300 group">
          <span class="relative z-10">Get Started</span>
          <span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></span>
        </button>
      </div>
      
      <!-- Mobile menu button -->
      <div class="md:hidden">
        <button class="text-white p-2">
          <svg class="h-6 w-6" 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"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

1 ... 311 312 313 314 315

Componentes de búsqueda

Categorías

Todos los componentes