Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de la barra lateral 27

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

                <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>

Menú de hamburguesas Componente 19

Un componente esquelético del menú de hamburguesas diseñado en estilo skeuomórfico, que imita elementos del mundo real. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
  <div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
    <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
    <button class="focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 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="M4 6h16M4 12h16m-7 6h7" />
      </svg>
    </button>
  </div>
  <div class="p-4 space-y-4">
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Home</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">About</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Services</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Contact</span>
    </div>
  </div>
  <div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
    <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
  </div>
</div>

Mapa de Calor Componente 18

Un componente de mapa de calor receptivo diseñado en un estilo Brutalism con alto contraste, con imágenes de marcador de posición y soporte de avatar para el modo oscuro.

Abrir Vista previa

                <div class="flex flex-col bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Heat Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="relative bg-red-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=1" alt="Heat Map 1" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region A</h3>
                <p>High Activity</p>
            </div>
        </div>
        <div class="relative bg-yellow-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=2" alt="Heat Map 2" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region B</h3>
                <p>Moderate Activity</p>
            </div>
        </div>
        <div class="relative bg-green-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=3" alt="Heat Map 3" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region C</h3>
                <p>Low Activity</p>
            </div>
        </div>
        <div class="relative bg-blue-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=4" alt="Heat Map 4" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region D</h3>
                <p>Very Low Activity</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-bold text-black dark:text-white mb-2">User Avatars</h2>
        <div class="flex flex-wrap gap-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar 5">
        </div>
    </div>
</div>

1 ... 237 238 239 240 241 242

Categorías

Todos los componentes