Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptiva con un diseño plano minimalista, combinación de colores monocromática y complejidad moderada, adecuado para interfaces de redes sociales. Es compatible con un tema oscuro que utiliza el prefijo dark: de Tailwind CSS y no requiere JavaScript. Las imágenes provienen de picsum.photos.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Image 1 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image1/600/400" alt="Image 1" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 2 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image2/600/400" alt="Image 2" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 3 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image3/600/400" alt="Image 3" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 4 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image4/600/400" alt="Image 4" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 5 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image5/600/400" alt="Image 5" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 6 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image6/600/400" alt="Image 6" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>
    </div>

    <!-- Lightbox Overlay (Hidden by default, would be shown with JS) -->
    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="relative">
            <img src="" alt="Lightbox Image" id="lightbox-image" class="max-w-3xl max-h-3xl rounded-lg shadow-lg">
            <button class="absolute top-4 right-4 text-white text-3xl">&times;</button>
        </div>
    </div>
</div>

Componente de infografía

Un componente de infografía complejo con un estilo de diseño Skeuomorphism y una combinación de colores vibrantes, adecuado para plataformas de comercio electrónico. Es responsivo y admite el modo oscuro usando Tailwind CSS. Muestra varias estadísticas de productos con elementos interactivos.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-12 text-center drop-shadow-lg">E-commerce Performance Dashboard</h1>

    <!-- Skeuomorphism Container for the Dashboard -->
    <div class="bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-700 dark:to-gray-900 p-8 rounded-3xl shadow-inset-xl border-t border-l border-gray-400 dark:border-gray-600 relative overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
      
      <!-- Top Bezel / Highlight -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-white opacity-20 dark:from-gray-300 dark:opacity-10 rounded-t-3xl"></div>
      <!-- Bottom Bezel / Shadow -->
      <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-black opacity-10 dark:from-gray-900 dark:opacity-20 rounded-b-3xl"></div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <!-- Sales Overview Card -->
        <div class="bg-gradient-to-br from-emerald-400 to-teal-500 dark:from-emerald-700 dark:to-teal-800 p-6 rounded-2xl shadow-xl border border-emerald-300 dark:border-emerald-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>

          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Total Sales</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-2 4a3 3 0 010 6m-9-4h4m-unset-24 0a3 3 0 010 6m-9-4h4L3 13.786A3.001 3.001 0 001 19c0 1.657 1.343 3 3 3h16c1.657 0 3-1.343 3-3 0-1.268-.787-2.378-1L12 21v-4m0-4c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">$1,234,567</p>
          <p class="text-emerald-100 text-sm opacity-90"><span class="text-white font-semibold">+15%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 5 min ago</div>
        </div>

        <!-- New Customers Card -->
        <div class="bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-800 p-6 rounded-2xl shadow-xl border border-purple-400 dark:border-purple-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-indigo-700 dark:from-purple-800 dark:to-indigo-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">New Customers</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 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="M17 20h2a2 2 0 002-2V4a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2m0 0l4-4m-4 4l4 4m0-4 4 4m0-4L9 15l4 4"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">8,765</p>
          <p class="text-purple-100 text-sm opacity-90"><span class="text-white font-semibold">+22%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 30 min ago</div>
        </div>

        <!-- Conversion Rate Card -->
        <div class="bg-gradient-to-br from-red-500 to-rose-600 dark:from-red-700 dark:to-rose-800 p-6 rounded-2xl shadow-xl border border-red-400 dark:border-red-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Conversion Rate</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 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="M13 7h8m0 0v8m0-8L11 9m-11 5h8m0 0v8m0-8L3 14m-3 5h8m0 0v8m0-8L3 19"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">3.24%</p>
          <p class="text-red-100 text-sm opacity-90"><span class="text-white font-semibold">+0.5%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 1 hr ago</div>
        </div>

        <!-- Average Order Value Card -->
        <div class="bg-gradient-to-br from-blue-500 to-cyan-600 dark:from-blue-700 dark:to-cyan-800 p-6 rounded-2xl shadow-xl border border-blue-400 dark:border-blue-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-cyan-700 dark:from-blue-800 dark:to-cyan-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Avg. Order Value</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 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="M9 19V6l12-3v13M9 19c0 1.105-1.12 2-2.5 2S4 20.105 4 19s1.12-2 2.5-2 2.5.895 2.5 2zm12 0c0 1.105-1.12 2-2.5 2S16 20.105 16 19s1.12-2 2.5-2 2.5.895 2.5 2zm-8-19v13m0-12h8"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">$127.50</p>
          <p class="text-blue-100 text-sm opacity-90"><span class="text-white font-semibold">-$5.00</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 2 hrs ago</div>
        </div>

        <!-- Top Products Section -->
        <div class="lg:col-span-2 bg-gradient-to-br from-slate-200 to-slate-400 dark:from-slate-700 dark:to-slate-800 p-6 rounded-2xl shadow-xl border border-slate-300 dark:border-slate-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-slate-300 to-slate-500 dark:from-slate-800 dark:to-slate-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10">
            <h3 class="text-gray-900 dark:text-white text-2xl font-bold mb-6 drop-shadow-md">Top Selling Products</h3>
            <div class="space-y-4">

              <!-- Product Item 1 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/178/80/80" alt="Product 1" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Stylish Wireless Headphones</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Electronics</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$199.99</span>
              </div>

              <!-- Product Item 2 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/180/80/80" alt="Product 2" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Ergonomic Office Chair</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Home & Office</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$349.00</span>
              </div>

              <!-- Product Item 3 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/182/80/80" alt="Product 3" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Premium Coffee Maker</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Kitchen Appliances</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$89.50</span>
              </div>

            </div>
          </div>
        </div>

        <!-- Recent Orders Section -->
        <div class="bg-gradient-to-br from-orange-400 to-amber-500 dark:from-orange-700 dark:to-amber-800 p-6 rounded-2xl shadow-xl border border-orange-300 dark:border-orange-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-orange-600 to-amber-700 dark:from-orange-800 dark:to-amber-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10">
            <h3 class="text-white text-2xl font-bold mb-6 drop-shadow-md">Recent Orders</h3>
            <div class="space-y-4">

              <!-- Order Item 1 -->
              <div class="flex items-center bg-white/20 dark:bg-white/10 rounded-xl p-3 shadow-inner-lg border border-white/30 dark:border-white/20 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full mr-4 shadow-md object-cover border border-white/50 dark:border-white/30">
                <div class="flex-grow">
                  <p class="text-white font-semibold text-lg">John Doe</p>
                  <p class="text-orange-100 text-sm">Order #12345 - $249.99</p>
                </div>
                <span class="text-white text-sm opacity-80">2 min ago</span>
              </div>

              <!-- Order Item 2 -->
              <div class="flex items-center bg-white/20 dark:bg-white/10 rounded-xl p-3 shadow-inner-lg border border-white/30 dark:border-white/20 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full mr-4 shadow-md object-cover border border-white/50 dark:border-white/30">
                <div class="flex-grow">
                  <p class="text-white font-semibold text-lg">Jane Smith</p>
                  <p class="text-orange-100 text-sm">Order #12344 - $75.00</p>
                </div>
                <span class="text-white text-sm opacity-80">15 min ago</span>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<style>
  /* Custom Utility for Inset Shadow */
  .shadow-inset-xl {
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 -8px 16px rgba(255, 255, 255, 0.2);
  }
  .dark .shadow-inset-xl {
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 -8px 16px rgba(100, 100, 100, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  /* Drop shadow for text to enhance relief effect */
  .drop-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  .dark .drop-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
</style>

Componente de navegación de ruta de navegación

Un componente de navegación de migas de pan receptivo diseñado en un estilo brutalista con una combinación de colores vibrantes para los tableros, con soporte para modo oscuro.

Abrir Vista previa

                <nav class="bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <ol class="list-reset flex text-sm text-white">
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Home
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Dashboard
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Analytics
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="text-gray-600 dark:text-gray-400">Current Page</li>
    </ol>
</nav>

<div class="p-4 bg-gray-700 rounded-lg dark:bg-gray-800 mt-4">
    <h2 class="text-xl text-white font-bold">
        Breadcrumb Navigation in Brutalism Style
    </h2>
    <p class="text-gray-400 dark:text-gray-300">
        Use the breadcrumbs above to navigate through the dashboard.
    </p>
    <div class="mt-4">
        <img class="w-full h-40 object-cover rounded" src="https://picsum.photos/800/200" alt="Dashboard Image">
    </div>
    <div class="mt-4">
        <h3 class="text-lg text-white">Team Members</h3>
        <div class="flex space-x-4 mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
        </div>
    </div>
</div>

Componente de infografía

Un componente de infografía receptivo con elementos de diseño 3D, combinación de colores pastel y complejidad moderada para tableros, con soporte para modo oscuro. Sin JavaScript, solo HTML con Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center"><div class="container mx-auto"><h1 class="text-4xl font-bold text-center mb-12 text-gray-800 dark:text-white">Infographics Dashboard</h1><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-purple-200 via-pink-200 to-blue-200 opacity-70 dark:from-purple-700 dark:via-pink-700 dark:to-blue-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">Total Sales</h2><p class="text-5xl font-extrabold text-purple-600 dark:text-purple-400">$12,345</p></div><div class="relative h-48"><div class="absolute bottom-0 left-0 w-full flex justify-around items-end"><div class="w-12 h-24 bg-purple-400 dark:bg-purple-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-32" style="height: 50%;"></div><div class="w-12 h-32 bg-pink-400 dark:bg-pink-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-40" style="height: 70%;"></div><div class="w-12 h-28 bg-blue-400 dark:bg-blue-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-36" style="height: 60%;"></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-green-200 via-yellow-200 to-red-200 opacity-70 dark:from-green-700 dark:via-yellow-700 dark:to-red-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">New Users</h2><p class="text-5xl font-extrabold text-green-600 dark:text-green-400">876</p></div><div class="relative h-48 flex items-center justify-center"><div class="w-36 h-36 bg-green-400 dark:bg-green-600 rounded-full flex items-center justify-center shadow-lg transform translate-z-10 group-hover:scale-110 transition-transform duration-300"><div class="w-24 h-24 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center"><svg class="w-16 h-16 text-green-700 dark:text-green-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-orange-200 via-red-200 to-yellow-200 opacity-70 dark:from-orange-700 dark:via-red-700 dark:to-yellow-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">Revenue Breakdown</h2><p class="text-5xl font-extrabold text-orange-600 dark:text-orange-400">65%</p></div><div class="relative h-48 flex items-center justify-center"><div class="w-36 h-36 rounded-full bg-orange-400 dark:bg-orange-600 flex items-center justify-center shadow-lg" style="transform: rotateX(60deg) rotateZ(45deg); outlook: 1px solid transparent;"><div class="w-24 h-24 rounded-full bg-white dark:bg-gray-800 absolute" style="transform: translateZ(10px);"></div><div class="w-32 h-32 rounded-full border-8 border-orange-200 dark:border-orange-500 absolute" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 40%, 50% 50%); transform: rotate(-45deg);"></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group md:col-span-2 lg:col-span-full"><div class="absolute inset-0 bg-gradient-to-br from-teal-200 via-cyan-200 to-indigo-200 opacity-70 dark:from-teal-700 dark:via-cyan-700 dark:to-indigo-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">User Demographics</h2><p class="text-4xl font-extrabold text-teal-600 dark:text-teal-400">Global Reach</p></div><div class="flex justify-center items-center flex-wrap gap-4"><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar1/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar2/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar3/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar4/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar5/200/200" alt="User Avatar" class="object-cover w-full h-full"></div></div></div></div></div></div></div>

Componente de la galería de productos

Un componente de galería de productos responsivo con un diseño esqueuomórfico, combinación de colores monocromática y compatibilidad con temas oscuros, creado con Tailwind CSS. Cuenta con un diseño simple adecuado para blogs y consumo de contenido, imitando elementos del mundo real con sombras y degradados sutiles.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
  <div class="container max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 border-gray-200 dark:border-gray-700 border-b-8 border-r-4 transition-all duration-300 ease-in-out">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center tracking-tight drop-shadow-md">Our Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Vintage Camera</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">A classic camera with a modern touch, perfect for capturing timeless moments.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$299</span>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Leather Journal</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Handcrafted leather journal for your thoughts and creative expressions.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$45</span>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Classic Turntable</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Experience the warm, rich sound of vinyl with this elegant turntable.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$549</span>
      </div>

    </div>
  </div>
</div>

Componente de galería

Un componente de galería responsivo con un efecto de morfismo de vidrio, colores vibrantes y compatibilidad con temas oscuros, adecuado para un tablero.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white">Our Vibrant Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-purple-800 dark:text-purple-300">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">A sleek design project showcasing modern aesthetics.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-red-800 dark:text-red-300">Innovate Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Cutting-edge technology integrated with user-centric design.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-green-800 dark:text-green-300">Data Drive</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Visualizing complex data into intuitive and actionable insights.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum4/400/300" alt="Gallery Image 4" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-blue-800 dark:text-blue-300">Analytics Flow</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Interactive dashboards for real-time performance monitoring.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum5/400/300" alt="Gallery Image 5" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-yellow-800 dark:text-yellow-300">Growth Metrics</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Tracking key growth indicators with dynamic charts.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum6/400/300" alt="Gallery Image 6" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-pink-800 dark:text-pink-300">User Insights</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Understanding user behavior through comprehensive reports.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de notificaciones

Un componente de notificaciones skeuomórfico para comercio electrónico con una combinación de colores vibrantes, una interfaz compleja, un diseño receptivo y compatibilidad con temas oscuros, creado con Tailwind CSS.

Abrir Vista previa

                <div class="relative min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-700 p-8 flex items-center justify-center font-sans">

  <!-- Skeuomorphic Notification Container -->
  <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-600 rounded-3xl shadow-2xl p-6 md:p-10 w-full max-w-lg
              border-t border-l border-gray-50 dark:border-gray-700
              border-b border-r border-gray-400 dark:border-gray-900
              transform transition-all duration-300 hover:scale-105">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-500">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md tracking-wide">Notifications</h2>
      <div class="relative">
        <button class="w-12 h-12 rounded-full bg-gradient-to-br from-rose-500 to-rose-700 dark:from-rose-700 dark:to-rose-900 p-1
                       shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200
                       focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-600
                       flex items-center justify-center">
          <span class="text-white text-xl font-bold">5</span>
        </button>
        <span class="absolute top-0 right-0 block h-4 w-4 bg-lime-400 dark:bg-lime-600 rounded-full ring-2 ring-white dark:ring-gray-800 animate-pulse"></span>
      </div>
    </div>

    <!-- Notification List -->
    <div class="space-y-6 max-h-96 overflow-y-auto pr-2 custom-scrollbar">

      <!-- Notification Item 1: New Order -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800
                    flex items-center justify-center shadow-inner-lg shadow-green-500/50 dark:shadow-green-900/50 mr-4">
          <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-4 3l4 2m-4 2l4 2m-4 2l4 2M3 6l4 2m-4 6l4 2m-4 2l4 2M12 18h.01"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Order Placed!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Order #12345 for $120.00 has been confirmed.</p>
          <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">2 minutes ago</p>
        </div>
      </div>

      <!-- Notification Item 2: Product Restock -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800
                    flex items-center justify-center shadow-inner-lg shadow-blue-500/50 dark:shadow-blue-900/50 mr-4">
          <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Restocked!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your favorite

Componente de mapa del sitio

Un componente de mapa del sitio retro/vintage diseñado para interfaces de redes sociales, utilizando un esquema de color monocromático. Presenta un diseño simple con un tema oscuro para una mejor legibilidad y atractivo estético.

Abrir Vista previa

                <div class="max-w-4xl mx-auto p-6 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-4xl text-white font-bold text-center mb-6">Site Map</h1>
    <ul class="list-disc list-inside space-y-4">
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Home</a>
                <p class="text-gray-400 text-sm">Our homepage with latest updates</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Profile</a>
                <p class="text-gray-400 text-sm">Your personal profile page</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Messages</a>
                <p class="text-gray-400 text-sm">View your messages</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Settings</a>
                <p class="text-gray-400 text-sm">Manage your account settings</p>
            </div>
        </li>
    </ul>
    <div class="mt-6">
        <h2 class="text-2xl text-white font-bold mb-2">Gallery</h2>
        <div class="grid grid-cols-2 gap-4">  
            <img src="https://picsum.photos/200/200?random=1" alt="Gallery Image 1" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Gallery Image 2" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Gallery Image 3" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Gallery Image 4" class="rounded-lg">
        </div>
    </div>
</div>

Componente de contenedor

Un contenedor de Material Design responsivo para comercio electrónico, con colores pastel, compatibilidad con modo oscuro y elementos interactivos complejos que utilizan Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 dark:from-gray-900 dark:to-gray-800 p-8 flex items-center justify-center">
  <div class="shadow-2xl rounded-3xl overflow-hidden max-w-6xl w-full bg-white dark:bg-gray-700 transition-all duration-300 transform hover:scale-[1.01] hover:shadow-purple-400/30 dark:hover:shadow-pink-400/20">
    <div class="md:flex">
      <!-- Product Image Section -->
      <div class="md:flex-shrink-0 md:w-1/2 relative">
        <img class="w-full h-96 object-cover object-center transform transition-transform duration-500 hover:scale-105" src="https://picsum.photos/seed/picsum/600/400" alt="Product Image">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-6">
          <h1 class="text-4xl font-extrabold text-white mb-2">Premium Gadget Pro</h1>
          <p class="text-purple-200 text-lg">Unleash your potential with unparalleled performance.</p>
        </div>
        <span class="absolute top-4 left-4 bg-purple-500 text-white text-sm font-bold px-3 py-1 rounded-full shadow-lg">NEW ARRIVAL</span>
      </div>

      <!-- Product Details Section -->
      <div class="p-8 md:w-1/2 flex flex-col justify-between">
        <div>
          <span class="text-sm text-purple-600 dark:text-purple-300 font-semibold mb-2 block">Electronics > Smartphones</span>
          <h2 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">Flagship Smartphone X</h2>
          <p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">Experience cutting-edge technology with our revolutionary smartphone. Featuring a stunning display, an advanced camera system, and all-day battery life.</p>
          
          <div class="flex items-center mb-6">
            <span class="text-5xl font-extrabold text-purple-700 dark:text-purple-300 mr-3">$999</span>
            <span class="text-xl text-gray-400 line-through">$1200</span>
            <span class="ml-3 bg-green-200 text-green-800 text-sm font-bold px-3 py-1 rounded-full">17% OFF</span>
          </div>

          <!-- Color Options -->
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Color:</h3>
            <div class="flex space-x-3">
              <button class="w-10 h-10 rounded-full bg-blue-500 border-4 border-purple-400 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-pink-500 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-pink-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-gray-800 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-gray-600 transition-all duration-200"></button>
            </div>
          </div>

          <!-- Quantity Selector -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Quantity:</h3>
            <div class="flex items-center space-x-3">
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">-</button>
              <span class="text-xl font-bold text-gray-800 dark:text-white">1</span>
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">+</button>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300">Add to Cart</button>
          <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-300">Buy Now</button>
        </div>
      </div>
    </div>
    
    <!-- Customer Reviews Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Customer Reviews</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Absolutely love this product! The camera is incredible and the battery lasts forever. Highly recommend it to everyone."
          </p>
        </div>
        
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">John Smith</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Fast shipping and the phone exceeded my expectations. So smooth and powerful. Best purchase this year!"
          </p>
        </div>

        <!-- Review Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/76.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Emily White</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Great phone, though it took a bit to get used to the new OS. Still, fantastic performance and beautiful design."
          </p>
        </div>
      </div>
    </div>

    <!-- Related Products Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Related Products</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Related Product Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related1/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Wireless Headphones</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Immersive audio experience.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$149</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related2/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Smartwatch Elite</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Track your fitness and stay connected.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$299</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related3/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Portable Power Bank</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Never run out of battery.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$59</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 4 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related4/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Noise-Cancelling Earbuds</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Pure sound, no distractions.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$199</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Font Awesome for icons (optional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Componente de componentes de navegación

Glassmorphism Monocromático Moderado Componente de navegación de comercio electrónico con soporte de modo oscuro

Abrir Vista previa

                <nav class="p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-20 text-gray-800 dark:text-white shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo or Brand Name -->
    <a href="#" class="text-xl font-bold p-2">ShopSphere</a>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300">
      <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 12h16m-4 6h4"></path>
      </svg>
    </button>

    <!-- Navigation Links -->
    <div class="hidden lg:flex flex-grow items-center justify-center" id="navbar-collapse">
      <ul class="flex flex-col lg:flex-row gap-1 lg:gap-4">
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Home</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Products</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Categories</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">About Us</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Contact</a></li>
      </ul>
    </div>

    <!-- Search and Cart Icons -->
    <div class="flex items-center gap-2 p-2">
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">
            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </a>
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300 relative">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        </a>
    </div>

  </div>
</nav>

1 ... 101 102 103 104 105 ... 282

Categorías

Todos los componentes