Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de carrito de compras

Un componente simple de carrito de compras en modo oscuro con un diseño receptivo, con listados de productos, cantidades y un total. Utiliza un esquema de color triádico con un fondo oscuro. Está diseñado para el consumo de contenidos.

Abrir Vista previa

                <div class="dark:bg-gray-900 dark:text-white min-h-screen p-4">
  <h1 class="text-2xl font-bold mb-6 text-center text-blue-400">Your Shopping Cart</h1>

  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-5">

    <!-- Product Item 1 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/237/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Awesome Gadget</h3>
        <p class="text-gray-400">Quantity: 1</p>
      </div>
      <span class="text-lg font-bold text-red-400">$29.99</span>
    </div>

    <!-- Product Item 2 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/238/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Super Item</h3>
        <p class="text-gray-400">Quantity: 2</p>
      </div>
      <span class="text-lg font-bold text-red-400">$19.50</span>
    </div>

    <!-- Product Item 3 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/239/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Mega Product</h3>
        <p class="text-gray-400">Quantity: 1</p>
      </div>
      <span class="text-lg font-bold text-red-400">$49.00</span>
    </div>

    <!-- Total -->
    <div class="border-t border-gray-700 pt-4 flex justify-between items-center">
      <span class="text-xl font-bold text-blue-400">Total:</span>
      <span class="text-xl font-bold text-red-400">$98.49</span>
    </div>

    <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
      Proceed to Checkout
    </button>
  </div>

  <!-- Responsive adjustments -->
  <style>
    @media (max-width: 640px) {
      .max-w-md {
        margin-left: 1rem;
        margin-right: 1rem;
      }
    }
  </style>
</div>

Pie de página Componente Pie de página

Un componente de pie de página simple con un sutil diseño de Skeuomorphism, que utiliza un esquema de color análogo. Incluye un aviso de derechos de autor, algunos enlaces de navegación e iconos de redes sociales. El diseño es responsivo y admite el modo oscuro.

Abrir Vista previa

                <footer class="bg-gradient-to-br from-stone-200 to-stone-400 text-stone-800 p-6 shadow-2xl dark:from-stone-800 dark:to-stone-900 dark:text-stone-200">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="mb-4 md:mb-0 text-sm">
      <p>&copy; 2023 BlogSphere. All rights reserved.</p>
    </div>
    <nav class="mb-4 md:mb-0">
      <ul class="flex space-x-6 text-sm">
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Privacy Policy</a></li>
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Terms of Service</a></li>
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Contact Us</a></li>
      </ul>
    </nav>
    <div class="flex space-x-4">
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.505 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.317 2.031c2.14 0 2.457.009 3.313.048 1.547.067 2.46.368 3.018.599 1.258.513 2.072 1.002 2.65 1.597.595.578 1.085 1.392 1.597 2.65.23.558.532 1.47.599 3.017.039.856.048 1.173.048 3.312 0 2.14-.009 2.457-.048 3.313-.067 1.547-.368 2.46-.599 3.018-.513 1.258-1.002 2.072-1.597 2.65-.578.595-1.392 1.085-2.65 1.597-.558.23-1.47.532-3.017.599-.856.039-1.173.048-3.312.048-2.14 0-2.457-.009-3.313-.048-1.547-.067-2.46-.368-3.018-.599-1.258-.513-2.072-1.002-2.65-1.597-.595-.578-1.085-1.392-1.597-2.65-.23-.558-.532-1.47-.599-3.017-.039-.856-.048-1.173-.048-3.312 0-2.14.009-2.457.048-3.313.067-1.547.368-2.46.599-3.018.513-1.258 1.002-2.072 1.597-2.65.578-.595 1.392-1.085 2.65-1.597.558-.23 1.47-.532 3.017-.599.856-.039 1.173-.048 3.312-.048ZM12 4.195c-2.466 0-2.736.01-3.692.051-1.433.062-2.3.344-2.805.547-.88.375-1.517.653-2.062 1.252-.527.575-.805 1.212-1.18 2.062-.203.504-.485 1.372-.547 2.805-.041.956-.051 1.226-.051 3.692 0 2.466.01 2.736.051 3.692.062 1.433.344 2.3.547 2.805.375.88.653 1.517 1.252 2.062.575.527 1.212.805 2.062 1.18.504.203 1.372.485 2.805.547.956.041 1.226.051 3.692.051 2.466 0 2.736-.01 3.692-.051 1.433-.062 2.3-.344 2.805-.547.88-.375 1.517-.653 2.062-1.252.527-.575.805-1.212 1.18-2.062.203-.504.485-1.372.547-2.805.041-.956.051-1.226.051-3.692 0-2.466-.01-2.736-.051-3.692-.062-1.433-.344-2.3-.547-2.805-.375-.88-.653-1.517-1.252-2.062-.575-.527-1.212-.805-2.062-1.18-.504-.203-1.372-.485-2.805-.547-.956-.041-1.226-.051-3.692-.051ZM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm0 8.195c-1.761 0-3.195-1.434-3.195-3.195S10.239 8.805 12 8.805s3.195 1.434 3.195 3.195-1.434 3.195-3.195 3.195Zm6.398-9.014c-.655 0-1.186.531-1.186 1.186S17.743 7.367 18.398 7.367s1.186-.531 1.186-1.186-.531-1.186-1.186-1.186Z" />
        </svg>
      </a>
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.296 2.762 7.933 6.603 9.243.484.088.662-.209.662-.463 0-.228-.009-.834-.014-1.636-2.688.586-3.254-1.297-3.254-1.297-.44-.817-1.07-1.033-1.07-1.033-.876-.597.066-.584.066-.584.969.068 1.479.995 1.479.995.86 1.474 2.25.991 2.793.758.086-.593.336-.991.613-1.22-2.144-.243-4.394-1.074-4.394-4.784 0-1.056.377-1.922 1-2.6-.1-.243-.435-1.291.096-2.564 0 0 .82-1.393 2.7-.54.78.199 1.608.298 2.435.301.827-.003 1.655-.102 2.435-.301 1.878-.853 2.7-.54 2.7-.54.531 1.273.196 2.32.096 2.564.623.678 1 1.544 1 2.6 0 3.719-2.253 4.535-4.398 4.778.347.298.654.887.654 1.787 0 1.291-.012 2.33-.012 2.645 0 .256.177.555.667.46C19.238 19.927 22 16.29 22 12c0-5.523-4.477-10-10-10z" />
        </svg>
      </a>
    </div>
  </div>
</footer>

Componente de formulario de pago

Un componente de formulario de pago responsivo con colores vibrantes y microinteracciones, compatible con el tema oscuro. Incluye secciones para la dirección de envío, los detalles de pago y el resumen del pedido, todo diseñado con Tailwind CSS para una experiencia de comercio electrónico compleja.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:flex">
    <!-- Shipping Address Section -->
    <div class="md:w-1/2 p-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-indigo-500" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          Shipping Address
        </div>
      </h2>
      <form class="space-y-5">
        <div>
          <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Full Name</label>
          <input type="text" id="fullName" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="John Doe">
        </div>
        <div>
          <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Address</label>
          <input type="text" id="address" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="123 Main St">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">City</label>
            <input type="text" id="city" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="Anytown">
          </div>
          <div>
            <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">ZIP Code</label>
            <input type="text" id="zip" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="12345">
          </div>
        </div>
      </form>
    </div>

    <!-- Payment and Order Summary Section -->
    <div class="md:w-1/2 p-6 sm:p-8 bg-indigo-50 dark:bg-gray-700">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-purple-500" 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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
          Payment Details
        </div>
      </h2>
      <form class="space-y-5 mb-8">
        <div>
          <label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Card Number</label>
          <input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="XXXX-XXXX-XXXX-XXXX">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
          <div class="sm:col-span-2">
            <label for="expiry" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Expiry Date</label>
            <input type="text" id="expiry" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="MM/YY">
          </div>
          <div>
            <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">CVV</label>
            <input type="text" id="cvv" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="123">
          </div>
        </div>
      </form>

      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-green-500" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          Order Summary
        </div>
      </h2>
      <div class="space-y-4 text-gray-700 dark:text-gray-300">
        <div class="flex justify-between items-center">
          <span>Subtotal</span>
          <span class="font-semibold text-lg">$150.00</span>
        </div>
        <div class="flex justify-between items-center">
          <span>Shipping</span>
          <span class="font-semibold text-lg">$10.00</span>
        </div>
        <div class="flex justify-between items-center border-t border-gray-200 dark:border-gray-600 pt-4">
          <span class="text-xl font-bold">Total</span>
          <span class="text-2xl font-extrabold text-green-600 dark:text-green-400">$160.00</span>
        </div>
      </div>

      <button class="mt-8 w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-300">
        Place Order (&#x1F680;)
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.6s ease-out;
  }
</style>

Componente de cuadro de búsqueda skeuomórfico

Cuadro de búsqueda skeuomórfico para redes sociales

Abrir Vista previa

                <div class="p-8 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center">
    <div class="relative w-full max-w-md">
        <!-- Outer Bevel/Shadow -->
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-500 dark:from-gray-700 dark:to-black rounded-full shadow-xl animate-pulse-light dark:animate-pulse-dark"></div>

        <!-- Inner Concave Effect -->
        <div class="relative flex items-center bg-gray-300 dark:bg-gray-800 rounded-full p-2 shadow-inner-concave dark:shadow-inner-concave-dark">
            <input type="text" placeholder="Search your friends, posts, or groups..." class="flex-grow py-3 pl-6 pr-4 bg-transparent text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 text-lg sm:text-xl font-medium tracking-wide" />
            
            <!-- Search Button -->
            <button class="relative w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-700 dark:to-indigo-800 rounded-full flex items-center justify-center shadow-neumorphic-btn dark:shadow-neumorphic-btn-dark hover:from-blue-600 hover:to-indigo-700 dark:hover:from-blue-800 dark:hover:to-indigo-900 transition-all duration-300 transform active:scale-95">
                <svg class="w-7 h-7 text-white" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
        </div>
    </div>

    <!-- Hidden custom styles for shadows (usually in CSS file or <style> tag) -->
    <style>
        /* Light Mode Inner Concave Shadow */
        .shadow-inner-concave {
            box-shadow: inset 8px 8px 15px #a7a7a7, inset -8px -8px 15px #ffffff;
        }

        /* Dark Mode Inner Concave Shadow */
        .dark .shadow-inner-concave-dark {
            box-shadow: inset 8px 8px 15px #4a4a4a, inset -8px -8px 15px #2a2a2a;
        }

        /* Light Mode Neumorphic Button Shadow */
        .shadow-neumorphic-btn {
            box-shadow: 6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff;
        }

        /* Dark Mode Neumorphic Button Shadow */
        .dark .shadow-neumorphic-btn-dark {
            box-shadow: 6px 6px 12px #2a2a2a, -6px -6px 12px #6a6a6a;
        }

        /* Animation for outer bevel light mode */
        @keyframes pulse-light {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.02); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }
        .animate-pulse-light {
            animation: pulse-light 4s infinite ease-in-out;
        }

        /* Animation for outer bevel dark mode */
        @keyframes pulse-dark {
            0% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.02); opacity: 0.9; }
            100% { transform: scale(1); opacity: 0.6; }
        }
        .dark .animate-pulse-dark {
            animation: pulse-dark 4s infinite ease-in-out;
        }

        /* Responsive adjustments */
        @media (max-width: 640px) {
            .shadow-inner-concave, .dark .shadow-inner-concave-dark {
                box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
            }
            .dark .shadow-inner-concave-dark {
                box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2a2a2a;
            }
            .shadow-neumorphic-btn, .dark .shadow-neumorphic-btn-dark {
                box-shadow: 4px 4px 8px #9a9a9a, -4px -4px 8px #ffffff;
            }
            .dark .shadow-neumorphic-btn-dark {
                box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #6a6a6a;
            }
            .w-14 {
                width: 3.5rem; /* ~56px */
            }
            .h-14 {
                height: 3.5rem; /* ~56px */
            }
            .p-8 {
                padding: 1rem;
            }
        }
    </style>
</div>

Componente de componentes de comercio electrónico

Un componente de comercio electrónico brutalista para un blog, con una combinación de colores vibrantes y una complejidad moderada. Incluye un diseño responsivo con soporte para temas oscuros utilizando Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center font-mono">

  <!-- Product Card -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
    <h3 class="text-2xl font-bold text-black dark:text-white mb-2">Disruptor X1</h3>
    <p class="text-black dark:text-white mb-4">Unleash the power of raw computing. This machine doesn't just run; it detonates.</p>
    <div class="flex justify-between items-center mb-4">
      <span class="text-3xl font-bold text-red-600 dark:text-red-400">$999.99</span>
      <button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">BUY NOW</button>
    </div>
  </div>

  <!-- Another Product Card -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
    <h3 class="text-2xl font-bold text-black dark:text-white mb-2">Axiom Z2</h3>
    <p class="text-black dark:text-white mb-4">Experience sound like never before. Pure, unadulterated audio assault.</p>
    <div class="flex justify-between items-center mb-4">
      <span class="text-3xl font-bold text-green-600 dark:text-green-400">$249.99</span>
      <button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">GRAB IT</button>
    </div>
  </div>

  <!-- Blog Post Snippet (acting as related content/upsell) -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 max-w-lg w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <h4 class="text-xl font-bold text-black dark:text-white mb-3">READ: The Philosophy of Brutalist Tech</h4>
    <img src="https://picsum.photos/400/200?random=3" alt="Blog Post Image" class="w-full h-32 object-cover border-4 border-black dark:border-white mb-4">
    <p class="text-black dark:text-white text-sm mb-4">Dive deep into the design principles that make our products unapologetically bold and functional.</p>
    <a href="#" class="text-blue-700 dark:text-blue-300 underline font-bold hover:text-blue-900 dark:hover:text-blue-500">Continue Reading &rarr;</a>

    <div class="mt-6 pt-4 border-t-2 border-black dark:border-white flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-white mr-4">
      <div>
        <p class="font-bold text-black dark:text-white">J.D. Brutal</p>
        <p class="text-sm text-gray-700 dark:text-gray-300">Tech Alchemist</p>
      </div>
    </div>
  </div>

  <!-- Responsive Adjustments -->
  <div class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Resize your browser to see responsiveness!</p>
    <p>Dark mode toggles automatically based on system preference.</p>
  </div>

</div>

Componentes de retroalimentación Componente

Un componente de retroalimentación de estilo brutalista con una combinación de colores pastel, complejidad moderada y diseño receptivo con soporte para temas oscuros. Diseñado para un portafolio para mostrar comentarios o testimonios.

Abrir Vista previa

                <div class="min-h-screen bg-pink-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-stone-800 shadow-brutalist border-4 border-stone-900 dark:border-pink-500 p-8 md:p-12 relative">
    <h2 class="text-3xl md:text-5xl font-extrabold text-stone-900 dark:text-pink-100 mb-8 border-b-4 border-stone-900 dark:border-pink-500 pb-4 inline-block">
      Client Testimonials
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Testimonial 1 -->
      <div class="bg-pink-200 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-pink-500 relative group">
        <p class="text-stone-800 dark:text-pink-200 text-lg mb-4 italic leading-relaxed">
          "Working with [Your Name] was an absolute game-changer for my project. Their unique vision and relentless dedication brought my ideas to life in ways I hadn

Componente de comparación de productos

Un componente de comparación de productos responsivo con soporte para temas oscuros, con un diseño minimalista/plano y una combinación de colores pastel. Este componente complejo es adecuado para tableros, lo que permite a los usuarios comparar múltiples productos con especificaciones detalladas y elementos interactivos.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Product Comparison</h2>

  <!-- Comparison Table -->
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-lime-50 dark:bg-lime-900">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product B</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product C</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Image</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productA/200/200" alt="Product A">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product A</p>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productB/200/200" alt="Product B">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product B</p>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productC/200/200" alt="Product C">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product C</p>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$199.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$249.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$179.99</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★☆</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★★</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★☆☆</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C1</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C2</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Availability</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 dark:text-red-400">Out of Stock</td>
        </tr>
        <!-- Add more rows for additional features as needed -->
      </tbody>
    </table>
  </div>

  <!-- Call to Action Buttons -->
  <div class="mt-6 flex flex-col sm:flex-row justify-around items-center space-y-4 sm:space-y-0 sm:space-x-4">
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
      Buy Product A
    </button>
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
      Buy Product B
    </button>
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-300 cursor-not-allowed dark:bg-lime-700 dark:text-lime-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800" disabled>
      Buy Product C (Out of Stock)
    </button>
  </div>

  <!-- Additional Interactive Elements -->
  <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Product A Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product A Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>High performance processor</li>
        <li>Long-lasting battery</li>
        <li>Excellent user reviews</li>
      </ul>
    </div>

    <!-- Product B Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product B Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>Superior camera quality</li>
        <li>Sleek, slim design</li>
        <li>Advanced security features</li>
      </ul>
    </div>

    <!-- Product C Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product C Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>Budget-friendly option</li>
        <li>Good for everyday use</li>
        <li>Compact and portable</li>
      </ul>
    </div>
  </div>

  <!-- User Reviews Section -->
  <div class="mt-8">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h3>
    <div class="space-y-4">
      <!-- Review 1 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Jane Doe</p>
          <p class="text-sm text-yellow-500">★★★★★</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product B is absolutely fantastic! The camera is unreal, and it's so fast. Highly recommend!"</p>
        </div>
      </div>
      <!-- Review 2 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">John Smith</p>
          <p class="text-sm text-yellow-500">★★★★☆</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product A is a solid choice for the price. Does everything I need it to do. Battery life is impressive."</p>
        </div>
      </div>
      <!-- Review 3 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Emily White</p>
          <p class="text-sm text-yellow-500">★★★☆☆</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product C is okay for the budget, but you definitely get what you pay for. Wish the camera was better."</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de Indicadores de Progreso

Un componente indicador de progreso de estilo glassmorphism para aplicaciones de redes sociales, con elementos translúcidos esmerilados similares al vidrio esmerilado con efectos de desenfoque. Utiliza un esquema de color análogo y ofrece una interfaz compleja y rica con múltiples elementos interactivos. El componente es responsivo y admite un tema oscuro con Tailwind CSS.

Abrir Vista previa

                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism Progress Indicator</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      background-color: #e0f2f7; /* Light blue background */
    }
    .dark body {
      background-color: #2c3e50; /* Dark blue background */
    }
    .glass-container {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .dark .glass-container {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .progress-bar {
      background: linear-gradient(to right, #a7e6ff, #6dd5ed);
    }
    .dark .progress-bar {
      background: linear-gradient(to right, #3498db, #2980b9);
    }
  </style>
</head>
<body>
  <div class="min-h-screen flex items-center justify-center p-4">
    <div class="glass-container rounded-lg p-6 w-full max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Your Social Milestones</h2>

      <!-- Progress Item 1: Profile Completion -->
      <div class="mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-medium text-gray-700 dark:text-gray-200">Profile Completion</span>
          <span class="text-lg font-semibold text-blue-700 dark:text-blue-300">75%</span>
        </div>
        <div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div class="progress-bar h-full rounded-full" style="width: 75%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Complete your profile to unlock new features!</p>
      </div>

      <!-- Progress Item 2: Connections Growth -->
      <div class="mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-medium text-gray-700 dark:text-gray-200">Connections Growth</span>
          <span class="text-lg font-semibold text-blue-700 dark:text-blue-300">50%</span>
        </div>
        <div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div class="progress-bar h-full rounded-full" style="width: 50%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Connect with more friends and expand your network.</p>
      </div>

      <!-- Progress Item 3: Post Engagement -->
      <div class="mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-medium text-gray-700 dark:text-gray-200">Post Engagement</span>
          <span class="text-lg font-semibold text-blue-700 dark:text-blue-300">90%</span>
        </div>
        <div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div class="progress-bar h-full rounded-full" style="width: 90%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Keep creating engaging content!</p>
      </div>

      <!-- Interactive Goal Setting -->
      <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Set Your Next Goal</h3>
        <div class="flex flex-col md:flex-row gap-4">
          <input type="text" placeholder="e.g., Reach 100 connections" 
                 class="flex-grow p-3 rounded-md bg-gray-100 dark:bg-gray-700 
                        text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 
                        focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 glass-container" />
          <button class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-md 
                         transition duration-300 ease-in-out transform hover:scale-105
                         focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 glass-container">
            Set Goal
          </button>
        </div>
      </div>

    </div>
  </div>
</body>
</html>

Componente de línea de tiempo

Un componente de línea de tiempo receptivo para paneles, con microinteracciones y una combinación de colores pastel, con soporte para temas oscuros. Utiliza Tailwind CSS para el estilo e incluye imágenes de marcador de posición de picsum.photos y avatares de randomuser.me.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Dashboard Timeline</h1>

  <div class="relative max-w-2xl mx-auto">
    <!-- Vertical line -->
    <div class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-pastel-200 dark:bg-pastel-700 h-full"></div>

    <!-- Timeline Item 1 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">New User Registration</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">John Doe just registered an account. Welcome him aboard!</p>
        <img src="https://picsum.photos/seed/user1/400/200" alt="Placeholder Image" class="mt-4 rounded-md w-full h-32 object-cover">
      </div>
    </div>

    <!-- Timeline Item 2 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Sales Report Generated</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Monthly sales report for Q3 is now available for review.</p>
        <div class="flex items-center mt-4">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <span class="text-gray-700 dark:text-gray-300 text-sm">Report by: Jane Smith</span>
        </div>
      </div>
    </div>

    <!-- Timeline Item 3 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Server Maintenance</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Scheduled server maintenance completed successfully.</p>
        <img src="https://picsum.photos/seed/server/400/200" alt="Placeholder Image" class="mt-4 rounded-md w-full h-32 object-cover">
      </div>
    </div>

    <!-- Timeline Item 4 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">New Feature Release</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Exciting new analytics features have been rolled out!</p>
        <div class="flex items-center mt-4">
          <img src="https://randomuser.me/api/portraits/women/50.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <span class="text-gray-700 dark:text-gray-300 text-sm">Announced by: Sarah Lee</span>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom Pastel Colors */
  .bg-pastel-200 { background-color: #e2e8f0; } /* Light Blue-Gray */
  .dark\:bg-pastel-700 { background-color: #4a5568; } /* Dark Blue-Gray */
  .bg-pastel-400 { background-color: #9f7aea; } /* Medium Purple */
  .dark\:bg-pastel-600 { background-color: #6b46c1; } /* Darker Purple */

  /* Responsive adjustments for timeline */
  @media (max-width: 768px) {
    .right-timeline, .left-timeline {
      justify-content: flex-end;
    }
    .right-timeline .order-1, .left-timeline .order-1 {
      width: 10/12;
    }
    .right-timeline .z-20, .left-timeline .z-20 {
      transform: translateX(50%);
    }
    .right-timeline,
    .left-timeline {
      left: 0;
    }
    .left-timeline {
      flex-direction: row;
    }
    /* Adjust the vertical line for mobile */
    .absolute.left-1\/2 {
      left: 50%; /* Keep it centered for simplicity, or adjust for responsiveness */
    }
  }
</style>

Componente de diseño de comercio electrónico

Un componente de diseño de comercio electrónico simple y receptivo con una estética de diseño de materiales en escala de grises, con una cuadrícula de productos, un encabezado y un pie de página, todos con soporte para modo oscuro. Utiliza picsum.photos para las imágenes de productos.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 shadow">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">E-Commerce Store</h1>
      <nav class="hidden md:block">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Products</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
        </ul>
      </nav>
      <div class="md:hidden">
        <button class="text-gray-600 dark:text-gray-300 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>
  </header>

  <!-- Main Content -->
  <main class="container mx-auto px-4 py-8 flex-grow">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$49.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$29.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$79.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 4</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$19.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-white dark:bg-gray-800 shadow mt-8">
    <div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
      &copy; 2023 E-Commerce Store. All rights reserved.
    </div>
  </footer>
</div>

1 ... 86 87 88 89 90 ... 282

Categorías

Todos los componentes