Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Brutalismo E-commerce Footer Navigation

Un componente de navegación de pie de página simple y brutalista para comercio electrónico, con colores pastel y soporte para modo oscuro.

Abrir Vista previa

                <footer class="bg-pink-100 text-purple-900 p-4 dark:bg-purple-900 dark:text-pink-100">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="mb-4 md:mb-0">
      <h2 class="text-2xl font-bold uppercase tracking-wider">ShopNow</h2>
    </div>
    <nav class="flex space-x-6">
      <a href="#" class="text-lg uppercase hover:underline">Products</a>
      <a href="#" class="text-lg uppercase hover:underline">About</a>
      <a href="#" class="text-lg uppercase hover:underline">Contact</a>
      <a href="#" class="text-lg uppercase hover:underline">Privacy</a>
    </nav>
  </div>
</footer>

Componente de visualización de precios

Un componente de visualización de precios de temática retro/vintage para comercio electrónico, con una combinación de colores triádica. Es un diseño complejo y responsivo con soporte para temas oscuros, construido con Tailwind CSS.

Abrir Vista previa

                <div class="relative min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex flex-col items-center justify-center font-mono">
  <!-- Vintage TV/Monitor Frame -->
  <div class="relative bg-gray-800 dark:bg-gray-200 rounded-xl shadow-2xl p-6 md:p-12 border-8 border-gray-900 dark:border-gray-100 transform -rotate-3 hover:rotate-0 transition-transform duration-500 ease-in-out">
    <div class="absolute inset-0 rounded-xl border-4 border-gray-700 dark:border-gray-300 pointer-events-none"></div>
    
    <!-- Screen/Display Area -->
    <div class="relative bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-300 dark:to-gray-500 p-4 rounded-lg shadow-inner">
      <div class="absolute inset-0 bg-black opacity-25 rounded-lg pointer-events-none"></div>
      
      <!-- Scanlines/CRT Effect -->
      <div class="absolute inset-0 z-10 pointer-events-none overflow-hidden">
        <div class="h-full w-full bg-repeating-linear-gradient-[0deg,#00000022_0px,#00000022_1px,transparent_1px,transparent_2px] animate-scanlines"></div>
      </div>

      <div class="relative z-20 text-center">
        <h2 class="text-2xl md:text-4xl font-bold text-yellow-400 dark:text-purple-600 mb-2 drop-shadow-[0_0_5px_rgba(255,255,0,0.7)] dark:drop-shadow-[0_0_5px_rgba(128,0,128,0.7)] animate-pulseY">
          FLASH SALE!
        </h2>
        <p class="text-white text-lg md:text-2xl mb-4 font-semibold opacity-90">
          Limited Stock - Grab Yours Now!
        </p>

        <!-- Product Image & Price -->
        <div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 mb-6">
          <div class="relative">
            <img src="https://picsum.photos/seed/retroproduct/300/300" alt="Retro Widget" class="w-48 h-48 md:w-64 md:h-64 object-cover rounded-lg shadow-lg border-4 border-purple-500 dark:border-yellow-400 transform hover:scale-105 transition-transform duration-300">
            <div class="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12 shadow-md">NEW!</div>
          </div>
          
          <div class="flex flex-col items-center">
            <p class="text-xl md:text-3xl line-through text-gray-400 dark:text-gray-600 mb-1 animate-fadeIn">
              <span class="font-bold">$99.99</span>
            </p>
            <p class="text-4xl md:text-6xl font-extrabold text-green-400 dark:text-lime-400 mb-4 animate-bounceX drop-shadow-[0_0_8px_rgba(0,255,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(128,255,0,0.8)]">
              $49.99
            </p>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 uppercase tracking-wider border-2 border-blue-400 dark:border-blue-800 animate-wiggle">
              Buy Now!
            </button>
          </div>
        </div>

        <!-- Call to Action / Urgency Meter -->
        <div class="bg-gray-600 dark:bg-gray-400 rounded-full h-4 mb-2 overflow-hidden shadow-inner">
          <div class="bg-gradient-to-r from-red-500 to-yellow-500 h-full w-3/4 rounded-full animate-fillBar"></div>
        </div>
        <p class="text-sm text-white opacity-80 animate-pulseSlight">
          Only <span class="font-bold text-yellow-300 dark:text-red-300">25%</span> of stock remaining!
        </p>
      </div>
    </div>

    <!-- Retro Knobs/Buttons -->
    <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-4">
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
    </div>

    <!-- Antenna -->
    <div class="absolute -top-12 right-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform rotate-6 animate-wobble"></div>
    <div class="absolute -top-12 left-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform -rotate-6 animate-wobble"></div>
  </div>

  <!-- Tailwind JIT compatibility for custom gradients and keyframes -->
  <style>
    @keyframes bounceX {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(5px); }
    }
    @keyframes pulseY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes fillBar {
      0% { width: 0%; }
      100% { width: 75%; /* Adjust based on stock */ }
    }
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    @keyframes wobble {
      0%, 100% { transform: rotate(6deg); }
      50% { transform: rotate(-6deg); }
    }
    @keyframes scanlines {
      0% { background-position: 0% 0%; }
      100% { background-position: 0% 100%; }
    }
    @keyframes pulseSlight {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }

    .animate-bounceX { animation: bounceX 3s infinite ease-in-out; }
    .animate-pulseY { animation: pulseY 2s infinite ease-in-out; }
    .animate-fadeIn { animation: fadeIn 1.5s forwards; }
    .animate-fillBar { animation: fillBar 2s forwards ease-out; }
    .animate-wiggle { animation: wiggle 2s infinite ease-in-out; }
    .animate-wobble { animation: wobble 4s infinite ease-in-out; }
    .animate-scanlines { animation: scanlines 10s linear infinite; }
    .animate-pulseSlight { animation: pulseSlight 3s infinite ease-in-out; }

    .bg-repeating-linear-gradient-\[0deg\,\#00000022_0px\,\#00000022_1px\,transparent_1px\,transparent_2px\] {
      background-image: repeating-linear-gradient(0deg, #00000022 0px, #00000022 1px, transparent 1px, transparent 2px);
    }
  </style>
</div>

Componente del Foro de la Comunidad

Un componente simple del foro de la comunidad neumórfica para el comercio electrónico, que utiliza un esquema de color triádico, con diseño receptivo y soporte para temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-md w-full">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Community Forum</h2>
    
    <div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <p class="font-medium text-gray-700 dark:text-gray-300">John Doe</p>
      </div>
      <p class="text-gray-600 dark:text-gray-400">"Looking for recommendations on the best ergonomic mouse for gaming!"</p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
        <span>2 hours ago</span>
        <button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
      </div>
    </div>

    <div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <p class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</p>
      </div>
      <p class="text-gray-600 dark:text-gray-400">"Just received my order, the quality is amazing! Highly recommend this store."</p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
        <span>1 day ago</span>
        <button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
      </div>
    </div>

    <div class="mt-6">
      <button class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white py-2 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark transition duration-300">
        View More Posts
      </button>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows - light mode */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows - dark mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #333333, -6px -6px 12px #555555;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }

  /* Triadic color scheme roughly used with blue for accent */
  /* Main background/base: gray (adjusting with neumorphism) */
  /* Accent 1: blue (for buttons/links) */
  /* Accent 2 & 3 would naturally emerge from interactions/hover states or subtle text colors */
</style>

Componentes de retroalimentación Componente

Un componente de retroalimentación brutalista simple con colores en escala de grises, soporte para modo oscuro y diseño receptivo.

Abrir Vista previa

                <div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-900 shadow-lg border-2 border-black dark:border-gray-700 p-6">
  <h2 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-2 border-black dark:border-gray-700 pb-2">Feedback</h2>
  <div class="mb-4">
    <div class="flex items-center mb-2">
      <img src="https://www.randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
      <p class="font-bold text-black dark:text-white">John Doe</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
      <p class="text-black dark:text-gray-300">"This article was incredibly insightful and well-written. I appreciate the clear explanations."</p>
    </div>
  </div>
  <div class="mb-4">
    <div class="flex items-center mb-2">
      <img src="https://www.randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
      <p class="font-bold text-black dark:text-white">Jane Smith</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
      <p class="text-black dark:text-gray-300">"I found a minor typo on page 3, but overall, a fantastic read!"</p>
    </div>
  </div>
  <div class="text-right">
    <button class="bg-black dark:bg-gray-700 text-white dark:text-gray-300 px-6 py-2 border-2 border-black dark:border-gray-700 font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
      Give Feedback
    </button>
  </div>
</div>

SkipToContentLink

Vaya al componente de enlace de contenido con interfaz de usuario de modo oscuro, combinación de colores triádica y complejidad simple para el comercio electrónico.

Abrir Vista previa

                <template>
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-purple-900 focus:text-lime-300 focus:p-3 focus:border-b-4 focus:border-cyan-400 dark:focus:bg-purple-900 dark:focus:text-lime-300 dark:focus:border-cyan-400">Skip to main content</a>
</template>

Alerta de tiempo de espera de sesión

Un componente de alerta de tiempo de espera de sesión inspirado en 3D con un

Abrir Vista previa

Componente de tabla de contenido

Un componente de tabla de contenido receptivo con un diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros, adecuado para interfaces de redes sociales. Sin JavaScript, solo HTML y Tailwind CSS.

Abrir Vista previa

                
<div class="p-8 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-950 min-h-screen font-sans">

  <!-- Skeuomorphic Container for Table of Contents -->
  <div class="max-w-3xl mx-auto bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_4px_8px_rgba(0,0,0,0.1),inset_0_-4px_8px_rgba(255,255,255,0.7),0_10px_20px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_4px_8px_rgba(255,255,255,0.1),inset_0_-4px_8px_rgba(0,0,0,0.5),0_10px_20px_rgba(0,0,0,0.4)] p-8 md:p-12 border-t border-l border-gray-400 dark:border-gray-600">

    <h1 class="text-4xl md:text-5xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-md">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-blue-600 to-green-600 dark:from-red-400 dark:via-blue-400 dark:to-green-400">Table of Contents</span>
    </h1>

    <!-- Search Bar with Skeuomorphic Input -->
    <div class="mb-8 relative">
      <input type="text" placeholder="Search topics..." class="w-full py-3 pl-12 pr-6 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_1px_0_rgba(255,255,255,0.8)] dark:shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),0_1px_0_rgba(0,0,0,0.5)] focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-600 transition duration-300">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 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>
    </div>

    <!-- Table of Contents List -->
    <ul class="space-y-4 md:space-y-6">

      <!-- Section 1 -->
      <li class="relative group">
        <a href="#section1" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>1. Introduction to Social Media</span>
          <svg class="w-6 h-6 text-red-500 dark:text-red-400 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-red-500 dark:border-red-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section1.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">1.1 What is Social Media?</a></li>
          <li><a href="#section1.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">1.2 History and Evolution</a></li>
        </ul>
      </li>

      <!-- Section 2 -->
      <li class="relative group">
        <a href="#section2" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>2. Key Social Media Platforms</span>
          <svg class="w-6 h-6 text-blue-500 dark:text-blue-400 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-blue-500 dark:border-blue-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section2.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">2.1 Facebook & Instagram</a></li>
          <li><a href="#section2.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">2.2 Twitter & LinkedIn</a></li>
          <li><a href="#section2.3" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-green-500 dark:before:text-green-400">2.3 TikTok & Snapchat</a></li>
        </ul>
      </li>

      <!-- Section 3 -->
      <li class="relative group">
        <a href="#section3" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>3. Social Media Strategy</span>
          <svg class="w-6 h-6 text-green-500 dark:text-green-400 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-green-500 dark:border-green-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section3.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">3.1 Content Creation</a></li>
          <li><a href="#section3.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">3.2 Audience Engagement</a></li>
          <li><a href="#section3.3" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-green-500 dark:before:text-green-400">3.3 Analytics & KPIs</a></li>
        </ul>
      </li>

      <!-- Section 4 -->
      <li class="relative group">
        <a href="#section4" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>4. Future of Social Media</span>
          <svg class="w-6 h-6 text-red-500 dark:text-red-400 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-red-500 dark:border-red-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section4.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">4.1 Emerging Trends</a></li>
          <li><a href="#section4.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">4.2 Metaverse & Web3</a></li>
        </ul>
      </li>

    </ul>

    <!-- Decorative elements mimicking physical buttons -->
    <div class="mt-12 flex justify-center space-x-6">
      <button class="py-3 px-8 rounded-full bg-gradient-to-br from-red-500 to-red-700 dark:from-red-700 dark:to-red-900 text-white font-bold text-lg shadow-[0_4px_8px_rgba(0,0,0,0.2),inset_0_-2px_4px_rgba(0,0,0,0.2)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.4),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:to-red-800 dark:hover:to-red-950 transition-all duration-300 transform hover:scale-105 active:scale-95 border-t border-l border-red-400 dark:border-red-600">
        <span class="drop-shadow-md">Previous Chapter</span>
      </button>
      <button class="py-3 px-8 rounded-full bg-gradient-to-br from-green-500 to-green-700 dark:from-green-700 dark:to-green-900 text-white font-bold text-lg shadow-[0_4px_8px_rgba(0,0,0,0.2),inset_0_-2px_4px_rgba(0,0,0,0.2)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.4),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:to-green-800 dark:hover:to-green-950 transition-all duration-300 transform hover:scale-105 active:scale-95 border-t border-l border-green-400 dark:border-green-600">
        <span class="drop-shadow-md">Next Chapter</span>
      </button>
    </div>

    <!-- Social Share Buttons mimicking embossed elements -->
    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">Share this Table of Contents:</p>
      <div class="flex justify-center space-x-4">
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-blue-600 dark:text-blue-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-10C8.48 2 4 6.48 4 12s4.48 10 10 10 10-4.48 10-10S19.52 2 14 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-red-600 dark:text-red-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 6c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 8c2.76 1.18 5.74 2 9 2s6.24-.82 9-2zm0 4c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 12c2.76 1.18 5.74 2 9 2s6.24-.82 9-2zm0 4c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 16c2.76 1.18 5.74 2 9 2s6.24-.82 9-2z"/></svg>
        </button>
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-green-600 dark:text-green-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15.5l-4-4 1.41-1.41L11 14.67l6.59-6.59L19 9.5l-8 8z"/></svg>
        </button>
      </div>
    </div>

  </div>

</div>

Componente de carrito de compras

Componente de carrito de compras con diseño 3D, tonos tierra y elementos interactivos complejos. Está diseñado para un sitio web de blog/contenido, con diseño responsivo y soporte para temas oscuros, utilizando Tailwind CSS.

Abrir Vista previa

                <div class="container mx-auto p-4 font-sans antialiased text-gray-800 dark:text-gray-200">
    <div class="relative min-h-screen bg-gradient-to-br from-indigo-100 to-purple-200 dark:from-gray-900 dark:to-gray-800 rounded-3xl shadow-2xl p-6 lg:p-10 transform skew-y-1 scale-95 origin-top-left">
        <div class="absolute inset-0 bg-white dark:bg-gray-700 opacity-60 rounded-3xl transform -skew-y-1 scale-95 origin-bottom-right shadow-xl"></div>
        <div class="absolute inset-0 bg-yellow-100 dark:bg-yellow-900 rounded-3xl transform skew-y-1 scale-95 origin-top-left shadow-xl"></div>
        <div class="relative z-10 p-4 lg:p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 animate-fade-in-down">

            <!-- Header -->
            <div class="mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
                <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 transform perspective-1000 rotateY-5 scale-105">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-indigo-600 dark:from-green-400 dark:to-indigo-400">Your Shopping Cart</span>
                </h1>
                <p class="text-lg lg:text-xl text-gray-600 dark:text-gray-400 italic">Review your selections</p>
            </div>

            <!-- Cart Items Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in-up">

                <!-- Cart Item 1 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-orange-200 to-yellow-200 dark:from-orange-800 dark:to-yellow-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item1/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Adventure Backpack</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Durable and spacious, perfect for hiking.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$79.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">1</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>

                <!-- Cart Item 2 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-cyan-200 to-blue-200 dark:from-cyan-800 dark:to-blue-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item2/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Wireless Noise-Cancelling Headphones</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Immersive sound experience with comfort.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$129.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">1</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>

                <!-- Cart Item 3 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-pink-200 to-red-200 dark:from-pink-800 dark:to-red-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item3/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Vintage Leather Journal</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted for timeless writing.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$24.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">2</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Cart Summary -->
            <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-6 animate-fade-in-up">
                <div class="flex flex-col md:flex-row justify-between items-center mb-6">
                    <div class="text-2xl font-semibold text-gray-900 dark:text-white mb-4 md:mb-0 transform perspective-1000 rotateY-5 scale-105">
                        Total: <span class="text-green-700 dark:text-green-400">$259.97</span>
                    </div>
                    <button class="bg-green-600 dark:bg-green-800 text-white py-3 px-8 rounded-full text-lg font-bold hover:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-xl relative perspective-600 z-20">
                        <span class="relative z-10">Proceed to Checkout</span>
                        <div class="absolute inset-0 bg-green-500 dark:bg-green-700 opacity-30 blur-sm"></div>
                    </button>
                </div>

                <!-- Shipping and Payment Info Placeholder -->
                <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 italic text-center transform translateZ-10 relative perspective-500">
                    <p class="mb-2">Shipping options and payment methods will appear here.</p>
                    <p>Continue shopping or apply discount codes.</p>
                    <div class="absolute inset-0 transform -skew-y-3 skew-x-3 bg-gradient-to-tr from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-500 opacity-20 blur-sm"></div>
                    <div class="absolute inset-0 transform skew-y-2 skew-x-2 bg-gradient-to-bl from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 opacity-10"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Basic 3D transform utilities */
    .perspective-1000 {
        perspective: 1000px;
    }
    .rotateY-5 {
        transform: rotateY(5deg);
    }
    .translateZ-20 {
        transform: translateZ(20px);
    }
    .shadow-text-sm {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    /* Keyframe Animations */
    @keyframes fade-in-down {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in-down {
        animation: fade-in-down 0.6s ease-out forwards;
    }

    .animate-fade-in-up {
        animation: fade-in-up 0.6s ease-out forwards;
    }

    /* Custom shadow for 3D effect on buttons */
    .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05),
                    0 2px 4px -1px rgba(0, 0, 0, 0.03)
                    /* inset 0 0 0 1px rgba(255, 255, 255, 0.1) for subtle inner highlight */;
    }
    .dark .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15),
                    0 2px 4px -1px rgba(0, 0, 0, 0.1);
    }

    .perspective-800 {
        perspective: 800px;
    }

    .transform-style-preserve-3d {
        transform-style: preserve-3d;
    }

    /* This is a common way to emulate 3d effects by creating a subtle layer behind */
    .relative .absolute {
        backface-visibility: hidden;
    }

     /* Additional subtle 3D effects for inner elements */
    .inner-element-3d {
        transform: translateZ(10px) rotateX(2deg);
        transition: transform 0.3s ease-out;
    }
    .hover\:inner-element-3d\:hover:translateZ-15 {
        transform: translateZ(15px) rotateX(0deg);
    }
</style>

Componente de botones de neumorfismo

Un componente de botón complejo de estilo Neumorphism con colores vibrantes, diseño receptivo y compatibilidad con modo oscuro, adecuado para sitios web comerciales / corporativos.

Abrir Vista previa

                <div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-200 dark:bg-gray-800">
  <!-- Primary Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-purple-700 dark:text-purple-300 bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-800 dark:to-purple-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-pink-700 dark:text-pink-300 bg-gradient-to-br from-pink-300 to-pink-500 dark:from-pink-800 dark:to-pink-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Secondary Action
  </button>

  <!-- Success Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-green-700 dark:text-green-300 bg-gradient-to-br from-green-300 to-green-500 dark:from-green-800 dark:to-green-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Success
  </button>

  <!-- Warning Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-yellow-700 dark:text-yellow-300 bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-800 dark:to-yellow-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Warning
  </button>

  <!-- Danger Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-red-700 dark:text-red-300 bg-gradient-to-br from-red-300 to-red-500 dark:from-red-800 dark:to-red-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Danger
  </button>

  <!-- Icon Button -->
  <button class="m-4 p-5 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-2xl text-blue-700 dark:text-blue-300 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-800 dark:to-blue-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </button>

  <!-- Disabled Button Example (add `pointer-events-none opacity-50` for real disabling) -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-gray-500 dark:text-gray-400 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 cursor-not-allowed">
    Disabled
  </button>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4d4d4d, -8px -8px 16px #333333;
  }

  .shadow-neumorphic-pressed-light {
    box-shadow: inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 6px 6px 12px #4d4d4d, inset -6px -6px 12px #333333;
  }
</style>

Componentes funcionales Componente

Una tarjeta de producto de comercio electrónico simple, receptiva e inspirada en 3D con un esquema de color análogo, compatible con el modo oscuro.

Abrir Vista previa

                <div class="relative flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
  <div class="relative h-96 w-72 transform rounded-lg bg-gradient-to-br from-purple-400 to-indigo-500 p-6 shadow-2xl transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-indigo-800">
    <div class="absolute inset-0 -z-10 transform rounded-lg bg-gradient-to-br from-purple-300 to-indigo-400 opacity-50 blur-xl dark:from-purple-600 dark:to-indigo-700"></div>
    <div class="flex flex-col items-center justify-between h-full">
      <h2 class="mb-2 text-center text-2xl font-bold text-white">3D Product</h2>
      <div class="relative mb-4 h-32 w-32">
        <img src="https://picsum.photos/id/176/200/200" alt="Product Image" class="h-full w-full rounded-full object-cover shadow-lg transform transition-transform duration-300 hover:scale-110">
        <div class="absolute inset-0 rounded-full ring-4 ring-white ring-opacity-50 dark:ring-gray-800"></div>
      </div>
      <p class="mb-4 text-center text-sm text-white text-opacity-80">A high-quality product with a unique 3D design for an immersive experience.</p>
      <div class="flex items-center justify-between w-full">
        <span class="text-xl font-bold text-white">$99.99</span>
        <button class="rounded-full bg-white px-4 py-2 text-purple-600 shadow-md transition-all duration-300 hover:bg-purple-100 hover:text-purple-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

1 ... 79 80 81 82 83 ... 282

Categorías

Todos los componentes