Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente Columnas

Un componente de columna simple y receptivo para comercio electrónico, con influencias de Material Design, colores en escala de grises y compatibilidad con el modo oscuro.

Abrir Vista previa

                 কাপড়<div class="container mx-auto p-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-md rounded-lg"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum1/400/300" alt="Product Image 1"> <h3 class="text-lg font-semibold mb-2">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 1. This is a very appealing product.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$19.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum2/400/300" alt="Product Image 2"> <h3 class="text-lg font-semibold mb-2">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 2. Another great item for your needs.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$29.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum3/400/300" alt="Product Image 3"> <h3 class="text-lg font-semibold mb-2">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 3. You definitely want this one!</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$39.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> </div></div>

Barra de progreso

Un componente de barra de progreso receptivo con soporte de modo oscuro para comercio electrónico, con una combinación de colores vibrantes y un diseño simple.

Abrir Vista previa

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
  <div class="bg-indigo-600 h-4 rounded-full dark:bg-indigo-400" style="width: 75%;">
    <span class="absolute right-2 top-0 h-full flex items-center text-white text-xs font-bold">75%</span>
  </div>
</div>

Componente Componentes de visualización de contenido

Un componente de visualización de contenido con microinteracciones, colores en escala de grises y complejidad moderada, diseñado para carteras con soporte de temas oscuros receptivos.

Abrir Vista previa

                
<div class="p-8 bg-white dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Article Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum1/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">Project Alpha: A Deep Dive</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore the intricacies of Project Alpha, a landmark achievement in innovative design and engineering.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 7 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Article Card 2 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum2/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">The Future of UI/UX: Trends and Predictions</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Dive into the exciting world of UI/UX and discover what lies ahead for cutting-edge design.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 10 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Testimonial Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 p-6 dark:bg-gray-800 dark:hover:bg-gray-700 md:col-span-2 flex items-start space-x-4">
        <img class="w-16 h-16 rounded-full object-cover shadow-md transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">"This component embodies the perfect blend of subtle animations and clean aesthetics. It

Componente de notificaciones

Componente de notificaciones brutalista para el panel de control

Abrir Vista previa

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4" dark:bg-gray-900 dark:bg-opacity-80>
  <div class="bg-yellow-400 border-4 border-black p-8 shadow-brutalism w-full max-w-md transform -rotate-3 hover:rotate-0 transition-transform duration-300 dark:bg-purple-700 dark:border-yellow-400">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl font-extrabold text-black uppercase tracking-wider dark:text-yellow-400">Notifications</h2>
      <button class="text-black hover:text-red-700 text-4xl font-bold dark:text-yellow-400 dark:hover:text-red-400">&times;</button>
    </div>
    <div class="space-y-6">
      <div class="bg-blue-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-teal-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">New message from <span class="underline">Alex</span></p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">"Hey, are you free for a quick call today?"</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">2 min ago</span>
        </div>
      </div>

      <div class="bg-red-600 border-2 border-black p-4 flex items-start space-x-4 transform -rotate-2 hover:rotate-0 transition-transform duration-300 dark:bg-orange-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">Task <span class="underline">"Prepare Q3 Report"</span> is overdue</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">Please complete it by end of day.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">1 hour ago</span>
        </div>
      </div>

      <div class="bg-green-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-lime-500 dark:border-yellow-400">
        <img src="https://picsum.photos/seed/dashboard/50/50" alt="Dashboard Icon" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400 object-cover">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">System Update Available</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">New features and bug fixes. Click to learn more.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">5 hours ago</span>
        </div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-black text-yellow-400 border-2 border-yellow-400 px-6 py-3 font-bold uppercase text-lg tracking-wider hover:bg-yellow-400 hover:text-black transition-colors duration-300 dark:bg-yellow-400 dark:text-black dark:border-purple-700 dark:hover:bg-purple-700 dark:hover:text-yellow-400">
        View All
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px black;
  }

  /* Dark mode styles come from Tailwind dark: prefix */
</style>

Componente de menú desplegable

Un menú desplegable responsivo de estilo 3D para paneles, con esquema de color triádico y compatibilidad con modo oscuro.

Abrir Vista previa

                
<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md px-4 py-2 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 text-white text-sm font-medium shadow-lg hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform transition-transform duration-200 active:scale-95 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 dark:hover:from-gray-600 dark:hover:via-gray-700 dark:hover:to-gray-800" 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.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown panel, show/hide based on dropdown state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 opacity-0 scale-95 transition-all duration-200 ease-out dark:bg-gray-800 dark:ring-gray-700 dark:divide-gray-700"
    role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">License</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<script>
  // This is a placeholder for JavaScript. In a real application, you would toggle the dropdown visibility with JS.
  // For this example, we'll simulate a "hover" effect with Tailwind classes that are normally toggled by JS.
  const dropdownButton = document.getElementById('options-menu');
  const dropdownPanel = dropdownButton.nextElementSibling;

  dropdownButton.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownButton.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

  dropdownPanel.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownPanel.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

</script>

Componente del cargador de Glassmorphism

Un componente de cargador simple, de estilo glassmorphism, con colores complementarios, adecuado para una cartera, con soporte de modo responsivo y oscuro.

Abrir Vista previa

                <div class="flex h-screen items-center justify-center bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative transform cursor-pointer rounded-2xl bg-white bg-opacity-10 p-8 shadow-2xl backdrop-blur-xl backdrop-filter transition-all duration-300 hover:scale-105 dark:bg-gray-700 dark:bg-opacity-10">
    <div class="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-20 blur-xl dark:from-gray-700 dark:via-gray-800 dark:to-black"></div>
    <div class="loader-dots relative flex h-24 w-24 transform items-center justify-center space-x-2 rounded-full bg-white bg-opacity-20 shadow-inner dark:bg-gray-800 dark:bg-opacity-20">
      <div class="h-4 w-4 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-purple-600 delay-75 dark:bg-purple-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-pink-600 delay-150 dark:bg-pink-400"></div>
    </div>
    <p class="mt-4 text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Loading Awesomeness...</p>
  </div>

  <style>
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    .loader-dots div {
      animation: bounce 1s infinite;
    }

    .loader-dots div:nth-child(2) {
      animation-delay: 0.1s;
    }

    .loader-dots div:nth-child(3) {
      animation-delay: 0.2s;
    }
  </style>
</div>

Un componente de ventana de chat simple, receptivo e inspirado en 3D con una combinación de colores pastel, diseñado para un portafolio para mostrar trabajos o productos. Incluye soporte para el modo oscuro.

Abrir Vista previa

                <div class="flex flex-col h-screen bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-800 dark:to-gray-900">
  <header class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Chat Window</h1>
  </header>

  <div class="flex-1 p-4 overflow-y-auto">
    <!-- Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        Hi there! This is an example of an incoming message in 3D.
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And this is an outgoing message, also with a cool 3D effect!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        The pastel colors give it a soft and inviting feel.
      </div>
    </div>

    <!-- Another Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And it's simple enough for a portfolio showcase!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

  </div>

  <footer class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <div class="flex">
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:focus:ring-indigo-600 shadow-inner">
      <button class="ml-3 px-6 py-3 bg-indigo-400 dark:bg-indigo-600 text-white rounded-lg font-semibold shadow-md hover:bg-indigo-500 dark:hover:bg-indigo-700 transition-colors duration-300">Send</button>
    </div>
  </footer>
</div>

Componente Mega Menú

Diseño minimalista / plano - Mega menú de comercio electrónico vibrante y simple con soporte para modo oscuro

Abrir Vista previa

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">ShopSwift</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Categories</button>
        <div class="absolute left-0 mt-3 w-56 bg-white dark:bg-gray-800 shadow-lg rounded-md opacity-0 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300 origin-top transform scale-95">
          <div class="p-4">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Electronics</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Apparel</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Home Goods</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Books</a>
          </div>
        </div>
      </div>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Deals</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 focus:outline-none">
        <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>
    </div>
  </div>
</nav>

Componente de pie de página

Un componente de pie de página minimalista con colores complementarios, complejidad moderada e integración en redes sociales. Cuenta con diseño responsivo y soporte para modo oscuro.

Abrir Vista previa

                <footer class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 SocialApp. All rights reserved.</p>
      </div>
      <div class="w-full md:w-1/3 flex justify-center mb-4 md:mb-0">
        <ul class="flex space-x-6">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3 flex justify-center md:justify-end">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-facebook-f"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Componente Pestañas

Un componente de pestañas responsivo con soporte de modo oscuro para el consumo de blog/contenido. Utiliza un esquema de color triádico con fondos oscuros para reducir la fatiga visual.

Abrir Vista previa

                
<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-gray-800 dark:bg-gray-950 rounded-lg shadow-xl overflow-hidden">
      <div class="flex border-b border-gray-700 dark:border-gray-700">
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-cyan-400 dark:text-cyan-500 border-b-2 border-cyan-400 dark:border-cyan-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Featured Articles
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-purple-400 dark:text-purple-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Popular Posts
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-fuchsia-400 dark:text-fuchsia-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Latest News
        </button>
      </div>

      <div class="p-6 md:p-8">
        <!-- Tab Content 1: Featured Articles -->
        <div class="space-y-8">
          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article1/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Future of AI in Content Creation</h3>
                <p class="text-gray-300 text-base leading-relaxed">Explore how artificial intelligence is revolutionizing the way we create and consume digital content, from automated writing to personalized recommendations.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
                <span>John Doe • 2 hours ago</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article2/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">Mastering Responsive Design with Tailwind CSS</h3>
                <p class="text-gray-300 text-base leading-relaxed">Dive deep into the utility-first CSS framework and learn how to build stunning, responsive web interfaces with ease and efficiency.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
                <span>Jane Smith • Yesterday</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article3/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Art of Storytelling in Digital Media</h3>
                <p class="text-gray-300 text-base leading-relaxed">Uncover the timeless principles of captivating narratives and how they apply to modern digital platforms and content forms.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
                <span>Peter Jones • 3 days ago</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 72 73 74 75 76 ... 282

Categorías

Todos los componentes

Componente Columnas

Barra de progreso

Componente Componentes de visualización de contenido

Componente de notificaciones

Componente de menú desplegable

Componente del cargador de Glassmorphism

Componente de ventana de chat

Componente Mega Menú

Componente de pie de página

Componente Pestañas