Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de fuente de actividad

Un componente complejo de fuente de actividades diseñado para mostrar el contenido del blog con múltiples elementos interactivos. Incorpora un estilo de diseño 3D y una combinación de colores complementaria. Admite diseño responsivo y tema oscuro.

Abrir Vista previa

                <div class="max-w-2xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Activity Feed</h2>
    <div class="space-y-6">
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-green-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">John Doe</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 2 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Exploring Tailwind CSS</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Join me as we dive into the world of Tailwind CSS, a utility-first CSS framework.</p>
            <img src="https://picsum.photos/400/200?random=1" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-green-500">Like</button>
                <button class="hover:text-green-500">Comment</button>
            </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-blue-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 3 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Understanding CSS Grid</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">CSS Grid is an amazing layout system that allows for two-dimensional layouts.</p>
            <img src="https://picsum.photos/400/200?random=2" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-blue-500">Like</button>
                <button class="hover:text-blue-500">Comment</button>
            </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-red-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">Mark Johnson</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 4 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Responsive Design Basics</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Learn the fundamental principles of creating responsive web designs.</p>
            <img src="https://picsum.photos/400/200?random=3" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-red-500">Like</button>
                <button class="hover:text-red-500">Comment</button>
            </div>
        </div>
    </div>
</div>

Componente del formulario de registro

Un componente de formulario de registro responsivo diseñado con un estilo skeuomórfico, utilizando un esquema de color monocromático y adaptado a las experiencias de comercio electrónico. Es compatible con el modo oscuro e incluye funciones de entrada interactivas para el registro de usuarios.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-gray-800">
    <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg p-8 w-full max-w-lg">
        <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6 text-center">Create Your Account</h2>
        <div class="flex justify-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-24 h-24 border-2 border-gray-500 dark:border-gray-600 shadow-lg">
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200  bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
                    <span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
                </label>
            </div>
            <button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 dark:bg-gray-400 dark:hover:bg-gray-300 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">
            Already have an account? <a href="#" class="text-gray-800 dark:text-gray-200 font-medium">Login</a>
        </p>
    </div>
</div>

Esqueuomorfismo Componente modal terroso

Un componente modal complejo y receptivo con diseño de skeuomorfismo, combinación de colores en tonos tierra y compatibilidad con temas oscuros para el uso de cartera. Cuenta con múltiples elementos interactivos sin JavaScript.

Abrir Vista previa

                <div class="fixed inset-0 bg-stone-800 bg-opacity-75 flex items-center justify-center p-4">
  <div class="bg-gradient-to-br from-stone-100 to-stone-300 text-stone-800 rounded-lg shadow-2xl overflow-hidden max-w-2xl w-full">
    <div class="p-6 border-b border-stone-400">
      <h2 class="text-2xl font-bold text-stone-900 drop-shadow-md">Project Title</h2>
    </div>
    <div class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <img src="https://picsum.photos/600/400?random=1" alt="Project Image" class="rounded-lg shadow-xl border-4 border-stone-300">
        </div>
        <div>
          <p class="text-stone-700 mb-4 leading-relaxed">This is a detailed description of the project. It highlights the key features, technologies used, and the goals achieved. The skeuomorphic design elements like soft shadows and gradients are used to give a sense of depth and realism.</p>
          <ul class="list-disc list-inside text-stone-600 space-y-2">
            <li>Feature 1: Detailed explanation</li>
            <li>Feature 2: Detailed explanation</li>
            <li>Feature 3: Detailed explanation</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="p-6 border-t border-stone-400 bg-stone-200 flex justify-end space-x-4">
      <button class="px-6 py-2 bg-stone-600 text-white font-semibold rounded-md shadow-lg hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50 transition ease-in-out duration-200">View Live</button>
      <button class="px-6 py-2 bg-stone-400 text-stone-800 font-semibold rounded-md shadow-lg hover:bg-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50 transition ease-in-out duration-200">Close</button>
    </div>
  </div>
</div>

<!-- Dark Mode -->
<div class="fixed inset-0 bg-stone-800 bg-opacity-75 flex items-center justify-center p-4 hidden dark:flex">
  <div class="bg-gradient-to-br from-stone-700 to-stone-900 text-stone-200 rounded-lg shadow-2xl overflow-hidden max-w-2xl w-full border border-stone-600">
    <div class="p-6 border-b border-stone-600">
      <h2 class="text-2xl font-bold text-stone-100 drop-shadow-md">Project Title</h2>
    </div>
    <div class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <img src="https://picsum.photos/600/400?random=2" alt="Project Image" class="rounded-lg shadow-xl border-4 border-stone-600">
        </div>
        <div>
          <p class="text-stone-300 mb-4 leading-relaxed">This is a detailed description of the project in dark mode, maintaining the skeuomorphic design with darker tones and subtle highlights.</p>
          <ul class="list-disc list-inside text-stone-400 space-y-2">
            <li>Feature 1: Detailed explanation</li>
            <li>Feature 2: Detailed explanation</li>
            <li>Feature 3: Detailed explanation</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="p-6 border-t border-stone-600 bg-stone-800 flex justify-end space-x-4">
      <button class="px-6 py-2 bg-stone-500 text-white font-semibold rounded-md shadow-lg hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50 transition ease-in-out duration-200">View Live</button>
      <button class="px-6 py-2 bg-stone-600 text-stone-200 font-semibold rounded-md shadow-lg hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50 transition ease-in-out duration-200">Close</button>
    </div>
  </div>
</div>

Componente de navegación de pie de página

Un componente de navegación de pie de página simple diseñado en estilo Glassmorphism con un esquema de color monocromático. Es responsivo, admite el modo oscuro y es adecuado para sitios web de comercio electrónico.

Abrir Vista previa

                <footer class="bg-white bg-opacity-40 backdrop-blur-lg p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-50">
    <div class="container mx-auto flex flex-col sm:flex-row justify-between items-center">
        <div class="text-center sm:text-left">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Shop with Us</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Your online shopping experience starts here.</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Home</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Products</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">About Us</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your E-commerce. All rights reserved.</p>
    </div>
</footer>

Navegación de la barra lateral de comercio electrónico

Un componente de navegación de barra lateral simple y receptivo para sitios web de comercio electrónico, con un esquema de color triádico, microinteracciones al pasar el mouse y soporte para modo oscuro, creado con Tailwind CSS.

Abrir Vista previa

                <div class="flex">
  <!-- Sidebar (Hidden on mobile, shown on desktop) -->
  <aside id="sidebar" class="bg-blue-500 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
    <a href="#" class="text-white flex items-center space-x-2 px-4">
      <span class="text-2xl font-extrabold">E-Shop</span>
    </a>

    <nav>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Home
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Products
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Categories
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Cart
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Account
      </a>
    </nav>
  </aside>

  <!-- Content area -->
  <div class="flex-1 p-10">
    <!-- A button to toggle the sidebar on mobile -->
    <button id="sidebar-toggle" class="text-blue-700 dark:text-blue-300 focus:outline-none md:hidden">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-8">Welcome to E-Shop</h1>
    <!-- Your main content goes here -->
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. Add your product listings, categories, etc. here.</p>
  </div>
</div>

<!-- Add this script at the end of the body tag -->
<script>
  const sidebarToggle = document.getElementById('sidebar-toggle');
  const sidebar = document.getElementById('sidebar');

  sidebarToggle.addEventListener('click', () => {
    sidebar.classList.toggle('-translate-x-full');
  });
</script>

Componente de tarjetas 3D

Un componente de tarjeta receptivo con un estilo de diseño 3D, colores vibrantes y múltiples elementos interactivos, adecuado para un tablero. Es compatible con el modo oscuro usando el prefijo oscuro de Tailwind.

Abrir Vista previa

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/200" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-red-600 text-white py-1 px-2 rounded-md">New</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the card content. It provides insight into the purpose of this card.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/201" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-green-600 text-white py-1 px-2 rounded-md">Featured</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Insightful content about the card, detailing its functionalities and offerings.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">Jane Smith</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-orange-600 text-white py-2 px-4 rounded-md hover:bg-orange-700 focus:outline-none">Explore</button>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/202" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-blue-600 text-white py-1 px-2 rounded-md">Popular</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Information and interactive elements that are engaging and useful.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">Mark Johnson</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none">Learn More</button>
        </div>
    </div>
</div>

Componente de acordeón

Un componente de acordeón de estilo 3D diseñado para sitios web comerciales/corporativos con soporte para temas oscuros.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Accordion Component</h2>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md transition-shadow duration-300 ease-in-out hover:shadow-lg">
        <div class="border-b border-gray-300 dark:border-gray-700">
            <button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                <span class="font-medium">Section 1</span>
                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
            </button>
            <div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
                <p class="text-gray-800 dark:text-gray-300">This is the content for section 1. You can place any information relevant to this section.</p>
                <img src="https://picsum.photos/400/200?random=1" alt="Random Image 1" class="mt-2 rounded-md"> 
            </div>
        </div>
        <div class="border-b border-gray-300 dark:border-gray-700">
            <button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                <span class="font-medium">Section 2</span>
                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
            </button>
            <div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
                <p class="text-gray-800 dark:text-gray-300">This is the content for section 2. You can place any information relevant to this section.</p>
                <img src="https://picsum.photos/400/200?random=2" alt="Random Image 2" class="mt-2 rounded-md"> 
            </div>
        </div>
        <div>
            <button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                <span class="font-medium">Section 3</span>
                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
            </button>
            <div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
                <p class="text-gray-800 dark:text-gray-300">This is the content for section 3. You can place any information relevant to this section.</p>
                <img src="https://picsum.photos/400/200?random=3" alt="Random Image 3" class="mt-2 rounded-md"> 
            </div>
        </div>
    </div>
</div>

Componente de mensajes de error

Un componente de mensajes de error interactivo diseñado con un estilo 3D y una combinación de colores monocromática. Adecuado para un portafolio, con elementos interactivos para la participación del usuario.

Abrir Vista previa

                <div class="max-w-md mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
  <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Error Messages</h2>
  <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
      <div class="text-gray-800 dark:text-gray-200">
        <span class="font-semibold">John Doe</span>
        <span class="text-gray-500 dark:text-gray-400"> - 2 hours ago</span>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200">There was an error processing your request. Please try again later.</p>
  </div>
  <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
      <div class="text-gray-800 dark:text-gray-200">
        <span class="font-semibold">Jane Smith</span>
        <span class="text-gray-500 dark:text-gray-400"> - 1 hour ago</span>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200">Invalid input! Please check your data and try again.</p>
  </div>
  <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow">Report Issue</button>
</div>

Componente de nube de etiquetas

Un componente de nube de etiquetas diseñado con estilo Neumorphism, que utiliza un esquema de color monocromático para fines de comercio electrónico y admite un tema oscuro con un diseño receptivo.

Abrir Vista previa

                <div class="flex flex-wrap justify-center mt-10 p-5 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
    <h2 class="w-full text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-5">Explore Tags</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Fashion</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Electronics</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Home & Living</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Books</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Beauty</span>
    </div>
</div>

Migas de pan de glassmorphism

Navegación de migas de pan Glassmorphism responsiva con modo oscuro.

Abrir Vista previa

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Flowbite</span>
      </div>
    </li>
  </ol>
</nav>

1 ... 124 125 126 127 128 ... 242

Categorías

Todos los componentes