Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de diseño de cuadrícula 29

Un componente de diseño de cuadrícula receptivo diseñado en un estilo brutalista con alto contraste y diseños inusuales, compatible con el modo oscuro con Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
  <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100">Brutalist Grid Layout</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=3" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=4" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 4</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=5" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 5</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=6" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 6</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
  </div>
</div>

Componente deslizante de carrusel 28

Un componente deslizante de carrusel minimalista con diseño responsivo y soporte para temas oscuros.

Abrir Vista previa

                <div class="relative bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3" class="w-full h-auto" />
            </div>
        </div>
    </div>
    <div class="absolute inset-0 flex items-center justify-between p-4">
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10094;
        </button>
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10095;
        </button>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1F2937;
        }
        .hover\:bg-gray-600:hover {
            background-color: #4B5563;
        }
    }
</style>

Componente de la barra lateral 27

Un componente de barra lateral de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 h-screen w-64 shadow-lg p-5">
    <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-3">Hello, User!</h1>
    </div>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=1" alt="Icon">
                <span class="text-gray-800 dark:text-white">Dashboard</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=2" alt="Icon">
                <span class="text-gray-800 dark:text-white">Profile</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=3" alt="Icon">
                <span class="text-gray-800 dark:text-white">Settings</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=4" alt="Icon">
                <span class="text-gray-800 dark:text-white">Messages</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=5" alt="Icon">
                <span class="text-gray-800 dark:text-white">Logout</span>
            </a>
        </li>
    </ul>
</div>

Componente de notificaciones 26

Un componente de notificaciones minimalista diseñado con Tailwind CSS, con efectos responsivos y soporte para temas oscuros, que muestra una lista de notificaciones con avatares e imágenes.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4">Notifications</h2>
    <div class="space-y-3">
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe liked your post</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Just now</p>
            </div>
            <img src="https://picsum.photos/40/40" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
        
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith commented on your photo</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">5 minutes ago</p>
            </div>
            <img src="https://picsum.photos/40/41" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
        
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Mark Wilson started following you</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">10 minutes ago</p>
            </div>
            <img src="https://picsum.photos/40/42" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
    </div>
</div>

Componentes interactivos Componente 25

Un componente interactivo de estilo Material Design con diseño de cuadrícula, diseño responsivo y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
  </div>

  <div class="mt-4">
    <img class="w-full rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random Image">
  </div>

  <div class="mt-4">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Me</h3>
    <p class="text-gray-600 dark:text-gray-400">I'm a passionate software engineer with experience in building web applications. I love coding and exploring new technologies.</p>
  </div>

  <div class="mt-4 flex justify-between">
    <a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Connect</a>
    <a href="#" class="px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:border-gray-400 dark:border-gray-700 dark:text-gray-400">Message</a>
  </div>
</div>

Componente 24 del sistema de clasificación

Un componente del sistema de clasificación diseñado en 3D que admite temas oscuros y efectos responsivos. Este componente cuenta con estrellas para las calificaciones, avatares de usuario y una sección de comentarios.

Abrir Vista previa

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full shadow-md border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
            </div>
        </div>
        <div class="flex mt-4 space-x-1">
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
        </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
        <img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
    </div>
</div>

Componente de retroalimentación 23

Un componente de retroalimentación diseñado en el estilo Material Design, con animaciones responsivas y soporte para temas oscuros, construido con Tailwind CSS.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto transition duration-300 ease-in-out transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
        <div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example feedback component for showcasing how user feedback can be displayed using Material Design principles. It supports dark mode with Tailwind CSS.</p>
    <img src="https://picsum.photos/200/100" alt="Feedback Image" class="w-full rounded-md mb-4">
    <div class="flex justify-between">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-200 ease-in-out">Like</button>
        <button class="bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-200 ease-in-out">Reply</button>
    </div>
</div>

Componente de visualización de precios 22

Un componente de visualización de precios minimalista que muestra la imagen, el nombre, el precio y un botón de un producto para agregar al carrito. Diseñado con capacidad de respuesta y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="max-w-sm 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/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
        <p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
        <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
    </div>
</div>

Componente de contenedor 21

Un componente contenedor receptivo de estilo retro/vintage con soporte para temas oscuros.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Nostalgia</h2>
  <p class="text-gray-600 dark:text-gray-300 mb-4">Experience the charm of the 80s and 90s with our carefully curated content. Dive into the vintage vibes that bring back fond memories.</p>
  <img class="rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image" />
  <div class="flex items-center">
    <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
    <div class="ml-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-gray-500 dark:text-gray-400">Retro Enthusiast</p>
    </div>
  </div>
  <button class="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
    Explore More
  </button>
</div>

Menú desplegable Componente 20

Un componente de menú desplegable con un estilo de diseño brutalista que utiliza Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.

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-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" 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-.02L10 10.293l3.71-3.11a.75.75 0 111.01 1.11l-4.25 3.5a.75.75 0 01-1.01 0l-4.25-3.5a.75.75 0 01-.02-1.06z" 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 z-10" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=1" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Profile
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=2" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=3" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Notifications
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=4" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Log out
      </a>
    </div>
  </div>
</div>

<style>
  /* Brutalism styles for dark mode support */
  [class*='bg-'] {
    background-color: #ffffff;
  }
  [class*='text-'] {
    color: #000000;
  }
  .bg-gray-800 {
    background-color: #2d3748;
  }
  .dark .text-gray-300 {
    color: #edf2f7;
  }
  .dark .hover\:bg-gray-700:hover {
    background-color: #4a5568;
  }
</style>

1 ... 301 302 303 304 305 ... 307

Categorías

Todos los componentes