Todos los componentes

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión receptivo con diseño Skeuomórfico, combinación de colores monocromática y soporte de temas oscuros, adecuado para sitios web comerciales.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 hover:scale-105 border-t-4 border-blue-500 dark:border-blue-700">
    <h2 class="text-4xl font-extrabold text-center text-gray-800 dark:text-white mb-8">
      <span class="block">Welcome Back!</span>
      <span class="block text-blue-500 dark:text-blue-400 text-2xl mt-2">Login to your account</span>
    </h2>
    <form class="space-y-6">
      <div class="relative">
        <input type="email" id="email" class="block w-full px-4 py-3 rounded-lg text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 shadow-inner appearance-none transition-all duration-300 peer placeholder-transparent" placeholder=" "/>
        <label for="email" class="absolute left-4 -top-2.5 text-gray-600 dark:text-gray-300 text-sm bg-gray-100 dark:bg-gray-700 px-1 transition-all duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3.5 peer-focus:-top-2.5 peer-focus:text-blue-600 dark:peer-focus:text-blue-400 peer-focus:text-sm">Email Address</label>
      </div>
      <div class="relative">
        <input type="password" id="password" class="block w-full px-4 py-3 rounded-lg text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 shadow-inner appearance-none transition-all duration-300 peer placeholder-transparent" placeholder=" "/>
        <label for="password" class="absolute left-4 -top-2.5 text-gray-600 dark:text-gray-300 text-sm bg-gray-100 dark:bg-gray-700 px-1 transition-all duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3.5 peer-focus:-top-2.5 peer-focus:text-blue-600 dark:peer-focus:text-blue-400 peer-focus:text-sm">Password</label>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember_me" name="remember_me" type="checkbox" class="h-5 w-5 text-blue-600 dark:text-blue-500 rounded border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400">
          <label for="remember_me" class="ml-3 block text-base text-gray-700 dark:text-gray-300">Remember me</label>
        </div>
        <div class="text-base">
          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-300">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:-translate-y-1 active:translate-y-0 active:shadow-inner-blue-800 skew-y-1 hover:skew-y-0">
          <span class="">Sign in</span>
          <svg class="ml-3 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="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </button>
      </div>
    </form>
    <div class="mt-8 text-center">
      <p class="text-base text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-300">Sign up</a></p>
    </div>
  </div>
</div>

Componente del formulario de registro

Un componente de formulario de registro receptivo con un diseño de morfismo de vidrio, combinación de colores en escala de grises y compatibilidad con temas oscuros, adecuado para sitios web comerciales / corporativos.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full m-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Username</label>
        <input type="text" id="username" name="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" name="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300">
          Register
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200" href="#">
          Already have an account?
        </a>
      </div>
    </form>
  </div>
</div>

Componente Botones

Un componente de botón minimalista para tableros, con soporte para diseño responsivo y tema oscuro.

Abrir vista previa

                <div class="flex space-x-4 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Primary Button -->
  <button class="px-4 py-2 rounded-md
    bg-blue-500 text-white font-semibold
    hover:bg-blue-600
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
    dark:bg-blue-700 dark:hover:bg-blue-600">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="px-4 py-2 rounded-md
    bg-gray-300 text-gray-800 font-semibold
    hover:bg-gray-400
    focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75
    dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
    Secondary Action
  </button>

  <!-- Success Button -->
  <button class="px-4 py-2 rounded-md
    bg-green-500 text-white font-semibold
    hover:bg-green-600
    focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75
    dark:bg-green-700 dark:hover:bg-green-600">
    Success
  </button>

  <!-- Danger Button -->
  <button class="px-4 py-2 rounded-md
    bg-red-500 text-white font-semibold
    hover:bg-red-600
    focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75
    dark:bg-red-700 dark:hover:bg-red-600">
    Delete
  </button>

  <!-- Disabled Button -->
  <button class="px-4 py-2 rounded-md
    bg-gray-200 text-gray-500 font-semibold
    cursor-not-allowed
    dark:bg-gray-800 dark:text-gray-600"
    disabled>
    Disabled
  </button>
</div>

Componente de navegación

Un componente de navegación simple y receptivo para un sitio web de portafolio, con una interfaz de usuario de modo oscuro. El diseño utiliza colores complementarios y garantiza la legibilidad y el atractivo estético en varios tamaños de pantalla.

Abrir vista previa

                <nav class="bg-gray-900 p-4 text-white">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-bold text-teal-400">MyPortfolio</a>
    <ul class="flex space-x-4">
      <li><a href="#about" class="hover:text-teal-400">About</a></li>
      <li><a href="#projects" class="hover:text-teal-400">Projects</a></li>
      <li><a href="#contact" class="hover:text-teal-400">Contact</a></li>
    </ul>
  </div>
</nav>

Componente del menú de hamburguesas

Un componente de menú de hamburguesas complejo, receptivo y vibrante con microinteracciones para el comercio electrónico, con una navegación deslizable, enlaces de categoría, una barra de búsqueda e íconos de redes sociales. Es compatible con el modo oscuro y utiliza Lorem Picsum para las imágenes.

Abrir vista previa

                <div class="relative">
  <input type="checkbox" id="menu-toggle" class="hidden peer" />
  <label for="menu-toggle" class="block cursor-pointer p-4 md:hidden focus:outline-none">
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:rotate-45 peer-checked:translate-y-2"></div>
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:opacity-0"></div>
    <div class="w-6 h-1 bg-fuchsia-500 transition-all duration-300 peer-checked:-rotate-45 peer-checked:-translate-y-2"></div>
  </label>

  <div class="fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-fuchsia-600 to-purple-700 text-white p-5 shadow-lg overflow-auto z-50 transform -translate-x-full peer-checked:translate-x-0 transition-transform duration-300 ease-in-out dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 md:relative md:w-auto md:h-auto md:bg-none md:shadow-none md:translate-x-0 md:flex md:flex-col md:overflow-visible">
    <div class="mb-8 md:hidden">
      <img src="https://www.picsum.photos/100/100" alt="Store Logo" class="rounded-full mx-auto mb-3" />
      <p class="text-center text-lg font-bold">E-Shop</p>
    </div>

    <nav class="md:flex md:flex-col md:space-y-2">
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Shop All</a>
      <div class="relative group">
        <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Categories</a>
        <div class="ml-5 text-sm absolute left-full top-0 w-48 bg-fuchsia-800 p-3 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-300 invisible group-hover:visible dark:bg-gray-700">
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Electronics</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Apparel</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Home Goods</a>
        </div>
      </div>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Deals</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Contact</a>
    </nav>

    <div class="mt-8 md:mt-4">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-fuchsia-700 bg-opacity-70 text-white placeholder-fuchsia-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-300 dark:bg-gray-700 dark:placeholder-gray-400" />
    </div>

    <div class="mt-8 pt-8 border-t border-fuchsia-500 border-opacity-50 text-center md:mt-4 md:pt-4 md:border-none">
      <p class="text-sm mb-4">Follow Us</p>
      <div class="flex justify-center space-x-4">
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</div>

360DegreeViewerComponent

Un componente de visor 360 simple con un diseño brutalista, colores complementarios y compatibilidad con el modo oscuro. Utiliza solo HTML y Tailwind CSS.

Abrir vista previa

                <div class="dark:bg-stone-900 bg-amber-50 relative h-screen flex flex-col items-center justify-center font-mono">
  
  <!-- Brutalist Border -->
  <div class="absolute inset-0 border-8 border-stone-950 dark:border-amber-50"></div>

  <div class="relative z-10 p-8 md:p-12 lg:p-16 bg-fuchsia-700 dark:bg-teal-700 text-amber-50 dark:text-stone-900 
                      border-4 border-stone-950 dark:border-amber-50 
                      shadow-[8px_8px_0_0_#1c1917] dark:shadow-[8px_8px_0_0_#fcd34d]">
    
    <h1 class="text-4xl md:text-5xl lg:text-6xl 
               font-extrabold mb-6 
               uppercase 
               border-b-4 border-amber-50 dark:border-stone-900 
               pb-2">
      360° Viewer
    </h1>
    
    <div class="relative w-full aspect-video 
                bg-stone-950 dark:bg-amber-50 
                border-4 border-stone-950 dark:border-amber-50 
                overflow-hidden
                mb-6">
      <!-- Placeholder for 360 image - in a real scenario, this would be a JS-powered viewer -->
      <img src="https://picsum.photos/seed/360view/800/450" 
           alt="360 degree view placeholder" 
           class="w-full h-full object-cover opacity-70">
      <div class="absolute inset-0 flex items-center justify-center">
        <p class="text-amber-50 dark:text-stone-900 text-xl md:text-2xl lg:text-3xl font-bold detection-sm:hidden">
          Content Placeholder
        </p>
      </div>
    </div>
    
    <p class="text-lg md:text-xl leading-relaxed mb-6">
      Explore this object from every angle. 
      This brutalist design emphasizes raw functionality and stark contrasts. 
      A complementary color scheme of deep fuchsia and teal (or amber and dark stone in dark mode) enhances the visual tension.
    </p>
    
    <div class="flex justify-between items-center">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" 
             alt="Author Avatar" 
             class="w-12 h-12 md:w-16 md:h-16 rounded-full 
                    border-4 border-stone-950 dark:border-amber-50 
                    shadow-[4px_4px_0_0_#1c1917] dark:shadow-[4px_4px_0_0_#fcd34d]">
        <span class="text-xl font-bold">J. Doe</span>
      </div>
      <a href="#" class="inline-block px-6 py-3 
                           bg-stone-950 dark:bg-amber-50 
                           text-amber-50 dark:text-stone-900 
                           uppercase font-bold 
                           border-4 border-stone-950 dark:border-amber-50 
                           shadow-[6px_6px_0_0_#8B0000] dark:shadow-[6px_6px_0_0_#2F4F4F]
                           hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all duration-200">
        Learn More
      </a>
    </div>

  </div>
</div>

Componente de cuadro de búsqueda

Un componente de cuadro de búsqueda complejo de estilo Glassmorphism con un esquema de color análogo, adecuado para un portafolio, con diseño receptivo y soporte de temas oscuros que usa solo HTML y Tailwind CSS.

Abrir vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="relative w-full max-w-2xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-2xl p-6 border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700"><div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-blue-500 dark:from-purple-700 dark:to-blue-900 opacity-20 rounded-2xl"></div><div class="relative z-10 flex items-center space-x-4"><svg class="h-8 w-8 text-gray-800 dark:text-gray-200" 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><input type="text" placeholder="Search your projects, skills, or articles..." class="flex-1 p-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-xl text-gray-900 dark:text-white placeholder-gray-700 dark:placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300 ease-in-out border border-gray-300 dark:border-gray-600"></div><div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Recent Searches</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#WebDesign</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#FrontEndDev</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#UIUX</span></div><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Popular Categories</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Development</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Design</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Marketing</span></div></div><div class="mt-6 text-center"><button class="px-6 py-3 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold rounded-full shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">Advanced Search</button></div></div></div>

Componente de carrito de compras

Un componente de carrito de compras simple y receptivo con soporte para temas oscuros, diseñado con Tailwind CSS siguiendo los principios de Material Design con un esquema de color en escala de grises. Utiliza picsum.photos para las imágenes de productos.

Abrir vista previa

                <div class="container mx-auto p-4">
  <div class="dark:bg-gray-800 bg-white shadow-md rounded-lg p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Your Shopping Cart</h1>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
        <p class="text-gray-800 dark:text-white font-bold">$299.99</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 1
      </div>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Books</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.50</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 2
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
      <span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
    </div>

    <div class="mt-6 flex justify-end">
      <button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
        Checkout
      </button>
    </div>
  </div>
</div>

Componente del sistema de clasificación

Un complejo componente del sistema de clasificación de temática retro para las redes sociales, con un esquema de color monocromático. Es totalmente responsivo y admite un modo oscuro. Este componente utiliza solo HTML y Tailwind CSS, sin JavaScript.

Abrir vista previa

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

  <!-- Retro Rating System Component -->
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <div class="mb-6 text-center">
      <h2 class="text-3xl font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wider">Rate This Post</h2>
      <p class="text-gray-500 dark:text-gray-400 text-sm">Share your thoughts with the community!</p>
    </div>

    <!-- User Avatar and Post Info -->
    <div class="flex items-center mb-6">
      <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-100">Galactic Traveler</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
      </div>
    </div>

    <!-- Rating Stars -->
    <div class="flex justify-center items-center mb-6">
      <input type="radio" id="star5" name="rating" value="5" class="hidden" />
      <label for="star5" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star4" name="rating" value="4" class="hidden" />
      <label for="star4" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star3" name="rating" value="3" class="hidden" />
      <label for="star3" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star2" name="rating" value="2" class="hidden" />
      <label for="star2" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star1" name="rating" value="1" class="hidden" />
      <label for="star1" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
    </div>

    <!-- Textarea for comments -->
    <div class="mb-6">
      <textarea class="w-full p-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-all duration-200 resize-y" rows="4" placeholder="Leave your comment here..."></textarea>
    </div>

    <!-- Buttons -->
    <div class="flex justify-between space-x-4">
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-700 hover:bg-gray-800 text-white dark:bg-gray-600 dark:hover:bg-gray-700 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Submit Rating
      </button>
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-300 hover:bg-gray-400 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Cancel
      </button>
    </div>

    <!-- Popular Reviews Section (Responsive) -->
    <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4 text-center">Popular Reviews</h3>
      <div class="grid gap-4 md:grid-cols-2">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Pixel Pioneer</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★★</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Absolutely loved this! Brings back so many memories of old forums."</p>
        </div>
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Data Diver</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★☆</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Great design, very nostalgic. A bit slow on my old phone though."</p>
        </div>
      </div>
       <div class="mt-4 text-center">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:underline text-sm">View all reviews</a>
      </div>
    </div>

  </div>

</div>

Componente de información sobre herramientas

Un componente de información sobre herramientas de diseño de materiales receptivo con esquema de color monocromático para comercio electrónico, con soporte para modo oscuro. No solo JavaScript, HTML y Tailwind CSS.

Abrir vista previa

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

  <!-- Product Card (Example to show tooltip in context) -->
  <div class="group relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <div class="p-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Stylish Headphones</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Immerse yourself in rich, clear sound with these premium headphones.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-gray-50">$149.99</span>
        
        <!-- Tooltip Trigger (e.g., Add to Cart Button) -->
        <button class="relative bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-medium py-2 px-4 rounded-full transition-colors duration-300 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          Add to Cart

          <!-- Tooltip Content -->
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
            Add item to your shopping cart
            <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 0L0 10h20L10 0z"/>
            </svg>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Another Tooltip Example (e.g., Info Icon) -->
  <div class="group relative ml-12">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500 dark:text-gray-400 cursor-pointer transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-500" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2h1a1 1 0 001-1V9a1 1 0 00-1-1H9zm6 3a1 1 0 100 2h2a1 1 0 100-2h-2z" clip-rule="evenodd" />
    </svg>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
      More information about the product
      <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0L0 10h20L10 0z"/>
      </svg>
    </div>
  </div>

</div>

Categorías