Componentes de búsqueda

Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de notificaciones del sistema

Un componente de notificación de tostadas receptivo con transiciones de degradado de tono joya, diseñado para sitios web gubernamentales/de servicio público, compatible con los modos claro y oscuro.

Abrir Vista previa

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-sm p-4 pointer-events-none">
  <!-- Success Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Success!</p>
        <p class="mt-1 text-sm text-emerald-100 dark:text-emerald-200">Your request has been processed successfully.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-emerald-100 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-300 to-emerald-400 dark:from-emerald-600 dark:to-teal-700 animate-pulse-width"></div>
  </div>

  <!-- Information Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <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 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Information</p>
        <p class="mt-1 text-sm text-blue-100 dark:text-blue-200">Further details are available on the new page.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-800 animate-pulse-width"></div>
  </div>

  <!-- Warning Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-yellow-500 to-orange-600 dark:from-yellow-700 dark:to-orange-800">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8.257 3.51a1 1 0 011.486 0L17.5 11.25a1 1 0 01-.743 1.75H3.243a1 1 0 01-.743-1.75L8.257 3.51zM10 14a1 1 0 100 2 1 1 0 000-2zm-1-6a1 1 0 012 0v3a1 1 0 11-2 0V8z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Warning!</p>
        <p class="mt-1 text-sm text-yellow-100 dark:text-yellow-200">Data submission has pending issues.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-yellow-100 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-600 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-yellow-300 to-yellow-400 dark:from-yellow-600 dark:to-orange-700 animate-pulse-width"></div>
  </div>

  <!-- Error Toast -->
  <div class="rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Error!</p>
        <p class="mt-1 text-sm text-red-100 dark:text-red-200">Failed to submit the form. Please try again.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-red-100 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-rose-700 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-red-300 to-red-400 dark:from-red-600 dark:to-rose-700 animate-pulse-width"></div>
  </div>

  <style>
    @keyframes pulse-width {
      0% {
        width: 0%;
      }
      100% {
        width: 100%;
      }
    }
    .animate-pulse-width {
      animation: pulse-width 5s linear forwards;
    }
    /* Further animations for show/hide (requires JS for full functionality, but here for visual intent) */
    .hide-toast {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    .show-toast {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Responsive Adjustments */
    @media (max-width: 639px) {
        .fixed.bottom-4.right-4 {
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            max-width: none;
            padding: 1rem;
            padding-bottom: 0;
        }
        .fixed.bottom-4.right-4 > div {
            margin-bottom: 1rem;
            border-radius: 0.5rem 0.5rem 0 0;
        }
        .fixed.bottom-4.right-4 > div:last-child {
            margin-bottom: 0;
        }
    }
  </style>
</div>

ArtDeco_ProductCards_Music

Componente de tarjetas de producto simple y receptivo con una estética Art Deco, con patrones geométricos y una combinación de colores cálidos/atardeceres, adecuados para plataformas de música y audio. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="bg-gradient-to-br from-yellow-100 via-orange-200 to-red-200 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-serif flex items-center justify-center">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-center mb-12 tracking-wider text-yellow-900 dark:text-orange-300 drop-shadow-lg leading-tight">
      <span class="block">Curated Sounds</span>
      <span class="block text-3xl md:text-4xl lg:text-5xl mt-2">Golden Age Audio</span>
    </h2>

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

      <!-- Product Card 1 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iI2ZmZTQ0ZSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iIzQ0NSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/1047/400/300" alt="Vintage Turntable" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">The Gilded Gramophone</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Experience unparalleled warmth with our meticulously restored vintage turntable. A true centerpiece for any audiophile.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$1,299</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZ1/yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/1118/400/300" alt="Art Deco Speakers" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Symphony Tower Speakers</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Precision-engineered sound with a sleek Art Deco design. Fill your space with rich, immersive audio.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$849</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/111/400/300" alt="Wireless Headphones" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Aria Wireless Headphones</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Unleash your music with luxurious comfort and crystal-clear sound, wirelessly.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$229</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

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

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña receptivo con un diseño monoespaciado/desarrollador, combinación de colores otoñal y estética de terminal, adecuado para aplicaciones de comercio electrónico. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex min-h-screen items-center justify-center bg-stone-100 p-4 dark:bg-zinc-900 font-mono">
  <div class="w-full max-w-md rounded-lg border border-stone-300 bg-stone-50 p-6 shadow-xl dark:border-zinc-700 dark:bg-zinc-800 md:p-8">
    <div class="mb-6 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-orange-800 dark:text-orange-400">Reset Password</h2>
      <span class="text-sm text-stone-600 dark:text-zinc-400">< KeyVault /></span>
    </div>

    <p class="mb-6 text-sm leading-relaxed text-stone-700 dark:text-zinc-300">
      Forgot your password? No problem. Enter your account email below and we'll send you a password reset link.
    </p>

    <form action="#" method="POST">
      <div class="mb-4">
        <label for="email" class="mb-2 block text-sm font-medium text-stone-700 dark:text-zinc-300">
          <span class="text-orange-700 dark:text-orange-500">guest@</span>your-store:<span class="text-amber-700 dark:text-amber-500">~</span><span class="animate-pulse">_</span> Enter Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          autocomplete="email"
          required
          placeholder="you@example.com"
          class="w-full rounded-md border border-stone-400 bg-stone-200 px-3 py-2 text-stone-900 placeholder:text-stone-500 focus:border-orange-600 focus:outline-none focus:ring-1 focus:ring-orange-600 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:focus:border-orange-500 dark:focus:ring-orange-500 text-sm md:text-base"
        />
      </div>

      <div class="mb-6 flex items-center justify-between text-xs md:text-sm">
        <div class="flex items-center">
          <input
            id="remember-me"
            name="remember-me"
            type="checkbox"
            class="h-4 w-4 rounded border-stone-500 bg-stone-300 text-orange-600 focus:ring-orange-500 dark:border-zinc-500 dark:bg-zinc-600 dark:checked:bg-orange-600"
          />
          <label for="remember-me" class="ml-2 text-stone-700 dark:text-zinc-300">
            <span class="text-orange-700 dark:text-orange-500">root@</span>cache:<span class="text-amber-700 dark:text-amber-500">/var/log</span> Remember Device
          </label>
        </div>
        <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">
          <span class="text-orange-700 dark:text-orange-500">sudo</span> View Log
        </a>
      </div>

      <button
        type="submit"
        class="w-full rounded-md bg-orange-700 px-4 py-2 font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-700 transition-colors dark:bg-orange-600 dark:hover:bg-orange-500 text-sm md:text-base"
      >
        <span class="text-amber-200">./</span>send-reset-link.sh
      </button>
    </form>

    <div class="mt-8 border-t border-stone-300 pt-6 text-center text-sm dark:border-zinc-700">
      <p class="text-stone-700 dark:text-zinc-300">
        <span class="text-orange-700 dark:text-orange-500">$</span> Already have an account? 
        <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">Login instead</a>
      </p>
      <p class="mt-2 text-stone-600 dark:text-zinc-400">
        <span class="text-orange-700 dark:text-orange-500">~</span> Need assistance? <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">Ping Support</a>
      </p>
    </div>
  </div>
</div>

Panel de juegos

Un componente de interfaz de usuario de tablero de juegos complejo y receptivo diseñado para el modo oscuro, con un esquema de color en escala de grises. Incluye estadísticas de jugadores, actividad reciente y listas de juegos.

Abrir Vista previa

                <div class="min-h-screen bg-gray-950 text-gray-100 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-950 dark:text-gray-100">

  <!-- Header -->
  <header class="flex flex-col sm:flex-row items-center justify-between mb-8 gap-4">
    <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-blue-400 tracking-tight">GAMER HUB</h1>
    <div class="relative w-full sm:w-auto">
      <input type="text" placeholder="Search games, players..." class="w-full sm:w-80 p-3 pl-10 rounded-lg bg-gray-800 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
    </div>
    <div class="flex items-center gap-4">
      <button aria-label="Notifications" class="relative p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
        <span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-gray-950 bg-red-500"></span>
      </button>
      <img class="w-10 h-10 rounded-full border-2 border-blue-500 object-cover" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
    </div>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Player Stats Card -->
    <section class="col-span-1 md:col-span-2 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
      <h2 class="text-2xl font-bold mb-4 text-blue-400">Player Stats</h2>
      <div class="flex flex-col items-center mb-6">
        <img class="w-24 h-24 rounded-full border-4 border-blue-400 mb-3 object-cover" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Player Avatar">
        <div class="text-center">
          <p class="text-xl font-semibold">BladeMasterX</p>
          <p class="text-gray-400 text-sm">Level 78 • Rank: Gold I</p>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4 text-center">
        <div>
          <p class="text-gray-300 text-sm">K/D Ratio</p>
          <p class="text-xl font-bold text-gray-50">2.45</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Wins</p>
          <p class="text-xl font-bold text-gray-50">1,234</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Matches Played</p>
          <p class="text-xl font-bold text-gray-50">3,109</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Hours Played</p>
          <p class="text-xl font-bold text-gray-50">876</p>
        </div>
      </div>
      <button class="mt-6 w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">View Profile</button>
    </section>

    <!-- Recent Activity Card -->
    <section class="col-span-1 md:col-span-3 lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
      <h2 class="text-2xl font-bold mb-5 text-accent-blue">Recent Activity</h2>
      <div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=1" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Defeated boss in <span class="text-blue-300">Cyberpunk Ascent</span></p>
            <p class="text-gray-400 text-sm">5 minutes ago</p>
          </div>
          <span class="text-green-400 font-bold text-sm">+120 XP</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Friend Avatar">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">GamerGirl_88</span> is online!</p>
            <p class="text-gray-400 text-sm">15 minutes ago</p>
          </div>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=2" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Achieved 'Grand Master' in <span class="text-blue-300">Starfall Arena</span></p>
            <p class="text-gray-400 text-sm">1 hour ago</p>
          </div>
          <span class="text-purple-400 font-bold text-sm">+1 Rank</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=3" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Bought new DLC for <span class="text-blue-300">Mythic Realms IV</span></p>
            <p class="text-gray-400 text-sm">3 hours ago</p>
          </div>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=4" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Completed Daily Quest in <span class="text-blue-300">Dragon's Lair Saga</span></p>
            <p class="text-gray-400 text-sm">Yesterday</p>
          </div>
          <span class="text-green-400 font-bold text-sm">+50 XP</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Friend Avatar">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">NeonKiller</span> is streaming <span class="text-blue-300">Pixel Warfare</span></p>
            <p class="text-gray-400 text-sm">Yesterday</p>
          </div>
        </div>
      </div>
    </section>

    <!-- My Games List -->
    <section class="col-span-1 md:col-span-3 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
      <div class="flex justify-between items-center mb-5">
        <h2 class="text-2xl font-bold text-blue-400">My Games</h2>
        <button aria-label="Add Game" class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
      <div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=5" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Galactic Odyssey</p>
            <p class="text-gray-400 text-sm">Online - 12 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=6" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Shadowblade Chronicles</p>
            <p class="text-gray-400 text-sm">Offline</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=7" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Pixel Royale</p>
            <p class="text-gray-400 text-sm">Online - 89 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=8" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Mystic Dungeon Crawler</p>
            <p class="text-gray-400 text-sm">Offline</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=9" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Cosmic Commanders</p>
            <p class="text-gray-400 text-sm">Online - 21 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
      </div>
    </section>

    <!-- Quick Stats Card -->
    <section class="col-span-1 md:col-span-1 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
      <h2 class="text-2xl font-bold mb-5 text-accent-blue">Quick Stats</h2>
      <div class="space-y-4">
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Online Friends</p>
          <span class="text-blue-400 font-bold text-xl">14</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">New Achievements</p>
          <span class="text-green-400 font-bold text-xl">3</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Upcoming Events</p>
          <span class="text-yellow-400 font-bold text-xl">2</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Messages</p>
          <span class="text-red-400 font-bold text-xl">5</span>
        </div>
      </div>
    </section>

  </main>

  <style>
    /* Custom scrollbar for better aesthetics */
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #374151; /* gray-700 */
      border-radius: 10px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #60A5FA; /* blue-400 */
      border-radius: 10px;
      border: 2px solid #1F2937; /* gray-800 */
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      border: 2px solid #1F2937; /* gray-800 */
    }

    /* For Firefox */
    .custom-scrollbar {
      scrollbar-width: thin;
      scrollbar-color: #60A5FA #374151; /* thumb and track */
    }
  </style>
</div>

Componente de visualización de precios de Cyberpunk

Un componente de visualización de precios responsivo para consultoría/servicios con una estética de neón ciberpunk y futurista. Cuenta con fondos oscuros, colores de acento análogos brillantes y admite el modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased text-purple-200 bg-gray-950 dark:bg-black py-16 px-4 sm:px-8 lg:px-16">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 sm:mb-16 tracking-tight drop-shadow-lg text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 via-rose-500 to-amber-400 dark:from-fuchsia-400 dark:via-rose-400 dark:to-orange-300">
      Our Cybernetic Solutions
    </h2>
    <p class="text-lg sm:text-xl text-center text-purple-300 dark:text-purple-400 mb-16 max-w-3xl mx-auto">
      Navigate the digital frontier with our bespoke services, engineered for peak performance and unparalleled insight. Choose your path to technological superiority.
    </p>

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

      <!-- Pricing Card 1: Standard Protocol -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-fuchsia-600/50 dark:border-fuchsia-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-fuchsia-600/10 dark:bg-fuchsia-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-fuchsia-400">Standard Protocol</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Essential data streams and basic threat analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-rose-400 drop-shadow-md">$499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Basic System Audit</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20" ><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 24/7 Virtual Support</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 10GB Secure Storage</li>
            <li class="flex items-center text-purple-500 dark:text-purple-600"><svg class="w-5 h-5 mr-3 text-purple-600 dark:text-purple-700" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Advanced AI Analytics</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-fuchsia-500 to-rose-500 hover:from-fuchsia-400 hover:to-rose-400 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Initiate Protocol
          </button>
        </div>
      </div>

      <!-- Pricing Card 2: Quantum Nexus (Featured) -->
      <div class="relative bg-gradient-to-br from-fuchsia-900 to-rose-900 dark:from-fuchsia-950 dark:to-rose-950 p-8 rounded-lg shadow-2xl border-2 border-rose-400 dark:border-rose-300 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out scale-102">
        <span class="absolute top-0 right-0 -mr-2 -mt-2 bg-gradient-to-br from-rose-500 to-orange-400 rounded-bl-lg px-4 py-1 text-sm font-semibold uppercase text-gray-950 dark:text-black shadow-md rotate-3">Most Popular</span>
        <div class="absolute inset-0 bg-orange-400/10 dark:bg-rose-400/10 opacity-30 blur-sm animate-pulse"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-300">Quantum Nexus</h3>
          <p class="text-purple-200 dark:text-purple-300 mb-6">Full-spectrum data integration and predictive analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-6xl font-bold text-amber-300 drop-shadow-lg">$999</span>
            <span class="text-xl text-orange-300 dark:text-orange-400 ml-2">/month</span>
          </div>
          <ul class="text-purple-100 dark:text-purple-200 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Complete System Overhaul</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Dedicated Cyber-Agent</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Unlimited Secure Storage</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Advanced AI Predictive Analytics</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Priority Network Access</li>
          </ul>
          <button class="w-full py-4 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-400 to-amber-300 hover:from-orange-300 hover:to-amber-200 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:ring-offset-2 focus:ring-offset-fuchsia-900 shadow-xl">
            Access Nexus
          </button>
        </div>
      </div>

      <!-- Pricing Card 3: Elite Cipher -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-orange-600/50 dark:border-orange-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-orange-600/10 dark:bg-orange-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-400">Elite Cipher</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Proprietary algorithms and direct neural interface.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-amber-400 drop-shadow-md">$1499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Bespoke System Engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 24/7 On-Site Specialist</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Decentralized Data Vault</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Quantum AI Integration</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-500 to-amber-400 hover:from-orange-400 hover:to-amber-300 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Activate Cipher
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <p class="text-lg text-purple-400 dark:text-purple-500 mb-6">Need a custom solution for your unique digital footprint?</p>
      <a href="#" class="inline-flex items-center px-8 py-4 border border-rose-500 rounded-full text-lg font-bold text-rose-300 hover:text-gray-950 hover:bg-gradient-to-r hover:from-rose-500 hover:to-amber-400 transition-all duration-300 transform hover:-translate-y-1 shadow-lg dark:hover:text-black dark:hover:from-rose-400 dark:hover:to-amber-300">
        <svg class="w-6 h-6 mr-3 text-current" 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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        Contact Our Data Alchemists
      </a>
    </div>
  </div>
</div>

Componente de botones para compartir en redes sociales: música/audio

Un conjunto de botones para compartir en redes sociales diseñados para plataformas de música y audio, con una estética de Material Design con colores apagados y compatibles con el modo oscuro. Incluye botones para plataformas comunes de uso compartido como Facebook, Twitter y correo electrónico.

Abrir Vista previa

                <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Share This Track</h3>
  <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">

    <!-- Facebook Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-blue-300 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on Facebook">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.64-.75 10-5.494 10-10z" clip-rule="evenodd" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Facebook</span>
    </a>

    <!-- Twitter Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-sky-300 hover:bg-sky-400 dark:bg-sky-600 dark:hover:bg-sky-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on Twitter">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.007-.531.807-.582 1.515-1.31 2.072-2.124-.741.329-1.532.547-2.35.648a4.332 4.332 0 001.956-2.269c-.767.429-1.62.735-2.514.896a4.36 4.36 0 00-7.712 2.923c0 .337.04.668.12 1.0H3.38c-.374 0-.742-.03-.9-.08C2.56 12.378 2 13.9 2 15.467c0 2.2.945 4.14 2.44 5.234A4.326 4.326 0 012 19.129c.655.109 1.3.178 1.954.178.69 0 1.36-.088 2.01-.256C5.58 20.088 6.94 20.251 8.29 20.251z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Twitter</span>
    </a>

    <!-- Email Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-teal-300 hover:bg-teal-400 dark:bg-teal-600 dark:hover:bg-teal-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share via Email">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M.05 3.555A2 2 0 012 2h20a2 2 0 011.95 1.555L12 12.032.05 3.555zM0 4.67V19a2 2 0 002 2h20a2 2 0 002-2V4.67l-12 7.7L0 4.67z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Email</span>
    </a>

    <!-- WhatsApp Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-green-300 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on WhatsApp">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12.046 2c-5.466 0-9.917 4.451-9.917 9.917 0 1.758.463 3.447 1.341 4.93L.5 22.5l5.068-1.579c1.42.793 3.023 1.258 4.708 1.258 5.467 0 9.917-4.451 9.917-9.917C21.963 6.45 17.512 2 12.046 2zm0 1.83c4.462 0 8.087 3.626 8.087 8.087 0 4.46-3.625 8.086-8.087 8.086-1.585 0-3.08-.458-4.364-1.25l-.265-.157-2.75 1.0L5.3 18.067l-.173-.284c-.878-1.425-1.353-3.03-1.353-4.733.001-4.461 3.626-8.086 8.087-8.086zm.135 3.42c-2.274 0-3.238 1.905-3.32 2.01-.06.07-.37.178-.506.11-.137-.067-.384-.14-.543.08-.22.29-.444.6-.607.78-.17.18-.344.382-.09.845.248.463.78 1.054 1.455 1.62.903.75 1.761 1.052 2.378 1.15.58.093 1.077.067 1.488-.168.411-.234.8-1.006 1.107-1.493.307-.487.31-.6.216-.78-.094-.18-.266-.43-.377-.57-.11-.14-.236-.26-.118-.46.118-.2.83-.997.94-.997.108 0 .61.08.7.207.088.127.568 1.54 1.077 1.85.51.31 1.218.423 1.246.257.03-.166-.35-.607-.78-1.43z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">WhatsApp</span>
    </a>

    <!-- Copy Link Button -->
    <button onclick="copyToClipboard('https://example.com/track-link')" class="flex items-center justify-center p-3 rounded-lg bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50"
      aria-label="Copy link to clipboard">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 10c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h6c.552 0 1 .448 1 1v4z" />
        <path fill-rule="evenodd" d="M9 20h9c1.105 0 2-.895 2-2V8h-2v10H9v2zm-4 0h9V6c0-1.105-.895-2-2-2H5c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2zm2-14h6.002a2 2 0 011.996 2v6.002a2 2 0 01-2 2H7.002a2 2 0 01-2-2V8.002a2 2 0 012-2z" clip-rule="evenodd" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Copy Link</span>
    </button>

    <!-- More Options Button -->
    <button class="flex items-center justify-center p-3 rounded-lg bg-indigo-300 hover:bg-indigo-400 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
      aria-label="More sharing options">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 5a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">More</span>
    </button>
  </div>

  <!-- Optional: Hidden input for copy to clipboard functionality -->
  <input type="text" id="trackLinkInput" class="absolute opacity-0 pointer-events-none" value="">

  <script>
    function copyToClipboard(text) {
      const input = document.getElementById('trackLinkInput');
      input.value = text;
      input.select();
      document.execCommand('copy');
      alert('Link copied to clipboard!'); // Simple feedback for user
    }
  </script>
</div>

Playful_Music_Timeline_Component

Un componente de línea de tiempo lúdico y divertido diseñado para plataformas de música y audio, con tonos brillantes de joyas, elementos redondeados y un diseño receptivo con soporte para modo oscuro. Muestra eventos de audio o pistas a lo largo del tiempo.

Abrir Vista previa

                <div class="font-sans bg-gradient-to-br from-emerald-50 to-teal-100 text-gray-800 py-12 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200">

  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-emerald-700 dark:text-emerald-400 drop-shadow-lg">Music Journey</h2>

    <div class="relative flex flex-col items-center">
      <!-- Vertical line -->
      <div class="absolute hidden md:block w-1.5 bg-gradient-to-b from-emerald-500 via-sapphire-500 to-ruby-500 h-full rounded-full dark:from-emerald-700 dark:via-blue-700 dark:to-red-700"></div>

      <!-- Timeline Items -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-y-16 gap-x-12 w-full max-w-5xl">

        <!-- Item 1: Left on Desktop, Full Width on Mobile -->
        <div class="md:col-start-1 md:text-right relative md:pr-16 lg:pr-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-emerald-300 dark:focus-within:ring-emerald-600">
            <div class="mb-4 text-emerald-600 dark:text-emerald-400 font-bold text-lg">2018 - The First Beat</div>
            <div class="text-2xl font-bold mb-3 text-emerald-800 dark:text-emerald-300">"Groove Unleashed" Album Release</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Our debut album, a mix of electronic vibes and soulful melodies, set the stage for our sonic exploration.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=1" alt="Album Cover">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13m-6 0V9m0 6a1 1 0 100 2 1 1 0 000-2zm0 0a1 1 0 100 2 1 1 0 000-2zm-6 6a1 1 0 100 2 1 1 0 000-2z"></path></svg>
                <span>Genre: Electronic Pop</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-emerald-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 2: Right on Desktop, Full Width on Mobile -->
        <div class="md:col-start-2 md:text-left relative md:pl-16 lg:pl-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:-rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-600">
            <div class="mb-4 text-sapphire-600 dark:text-sapphire-400 font-bold text-lg">2019 - Live Resonance</div>
            <div class="text-2xl font-bold mb-3 text-sapphire-800 dark:text-sapphire-300">World Tour & Fan Engagement</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Connecting with fans globally through vibrant live performances and interactive sessions.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=2" alt="Concert Stage">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15v-1a4 4 0 00-4-4H3m0 0l1.5-1.5M3 3l-1.5 1.5m10 4a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                <span>Attendees: 50,000+</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-sapphire-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 3: Left on Desktop, Full Width on Mobile -->
        <div class="md:col-start-1 md:text-right relative md:pr-16 lg:pr-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-red-300 dark:focus-within:ring-red-600">
            <div class="mb-4 text-ruby-600 dark:text-ruby-400 font-bold text-lg">2020 - Digital Symphony</div>
            <div class="text-2xl font-bold mb-3 text-ruby-800 dark:text-ruby-300">Exclusive Streaming Series Launch</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Launched a highly acclaimed streaming series, bringing intimate performances to homes worldwide.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=3" alt="Streaming Setup">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 11-8 0 4 4 0 018 0zm0 8a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                <span>Viewers: 1 Million+</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-ruby-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 4: Right on Desktop, Full Width on Mobile -->
        <div class="md:col-start-2 md:text-left relative md:pl-16 lg:pl-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:-rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
            <div class="mb-4 text-purple-600 dark:text-purple-400 font-bold text-lg">2021 - Collaborative Harmonies</div>
            <div class="text-2xl font-bold mb-3 text-purple-800 dark:text-purple-300">Ft. Artist Collaborations & Remixes</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Exciting collaborations with renowned artists, pushing boundaries and creating fresh sounds.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=4" alt="Collaboration Session">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <img class="w-6 h-6 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar">
                <img class="w-6 h-6 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
                <span>Featured Artists</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-purple-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

      </div>
    </div>

    <div class="text-center mt-16">
        <a href="#" class="inline-flex items-center px-8 py-4 bg-emerald-600 text-white font-semibold rounded-full shadow-lg hover:bg-emerald-700 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:focus:ring-emerald-600 transition duration-300">
            Explore More Sounds
            <svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
    </div>

  </div>
</div>

<style>
  /* Custom colors for Jewel Tones, adjusted for playfulness/brightness */
  .text-emerald-700 { color: #027a48; } .dark\:text-emerald-400 { color: #34d399; }
  .bg-emerald-500 { background-color: #10b981; }
  .bg-sapphire-500 { background-color: #3b82f6; }
  .bg-ruby-500 { background-color: #ef4444; }
  .bg-purple-500 { background-color: #a855f7; }

  .text-emerald-600 { color: #059669; } .dark\:text-emerald-400 { color: #34d399; }
  .text-emerald-800 { color: #065f46; } .dark\:text-emerald-300 { color: #6ee7b7; }

  .text-sapphire-600 { color: #2563eb; } .dark\:text-sapphire-400 { color: #60a5fa; }
  .text-sapphire-800 { color: #1e40af; } .dark\:text-sapphire-300 { color: #93c5fd; }

  .text-ruby-600 { color: #dc2626; } .dark\:text-ruby-400 { color: #f87171; }
  .text-ruby-800 { color: #991b1b; } .dark\:text-ruby-300 { color: #fda4af; }

  .text-purple-600 { color: #9333ea; } .dark\:text-purple-400 { color: #c084fc; }
  .text-purple-800 { color: #6b21a8; } .dark\:text-purple-300 { color: #d8b4fe; }


  /* Focus ring colors */
  .focus-within\:ring-emerald-300 { box-shadow: 0 0 0 4px #a7f3d0; } .dark\:focus-within\:ring-emerald-600 { box-shadow: 0 0 0 4px #047857; }
  .focus-within\:ring-blue-300 { box-shadow: 0 0 0 4px #93c5fd; } .dark\:focus-within\:ring-blue-600 { box-shadow: 0 0 0 4px #2563eb; }
  .focus-within\:ring-red-300 { box-shadow: 0 0 0 4px #fca5a5; } .dark\:focus-within\:ring-red-600 { box-shadow: 0 0 0 4px #dc2626; }
  .focus-within\:ring-purple-300 { box-shadow: 0 0 0 4px #d8b4fe; } .dark\:focus-within\:ring-purple-600 { box-shadow: 0 0 0 4px #a855f7; }

  /* Safari specific flex-basis fix for mobile layout */
  @supports (-webkit-touch-callout: none) {
    .md\:grid-cols-2 > div {
      width: 100%;
    }
  }
</style>

Watercolor_Artistic_Grid_Layout_Consulting

Un componente de diseño de cuadrícula simple y receptivo para consultoría / servicios, con un diseño artístico / acuarela suave con neutros fríos y soporte de modo oscuro.

Abrir Vista previa

                <div class="font-sans bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-6 md:p-12 lg:p-16
            relative overflow-hidden group">
  <!-- Background artistic overlay for light mode -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-0 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2020/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(199, 210, 254)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(224, 231, 255)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(165, 180, 252)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <!-- Background artistic overlay for dark mode -->
  <div class="absolute inset-0 z-0 opacity-0 dark:opacity-30 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(31, 41, 55)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(55, 65, 81)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(17, 24, 39)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
    <header class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                 text-gray-900 dark:text-gray-50 drop-shadow-lg leading-tight">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering your business with strategic insights and tailored solutions.
      </p>
    </header>

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

      <!-- Service Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><circle cx="50" cy="50" r="40" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1015/300/200" alt="Strategy Development" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Strategy Development</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Crafting innovative strategies to navigate complex markets and achieve sustainable growth.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M20 50 L80 50 M50 20 L50 80" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1041/300/200" alt="Operations Optimization" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Operations Optimization</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Streamlining processes and enhancing efficiency to maximize your operational performance.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M10 90 L90 10 L80 90 L10 90 Z" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1060/300/200" alt="Digital Transformation" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Digital Transformation</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Guiding your journey through digital innovation, from adoption to full integration.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

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

Pie de página de reservas corporativas

Un componente de pie de página corporativo complejo y responsivo diseñado para sistemas de reservas, con neutros cálidos y soporte para modo oscuro, utilizando HTML semántico y Tailwind CSS.

Abrir Vista previa

                <footer class="bg-stone-100 dark:bg-stone-900 text-stone-700 dark:text-stone-300 py-12 md:py-16">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
      <!-- Company Info / Logo -->
      <div class="flex flex-col items-start">
        <a href="#" class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <span class="text-amber-600 dark:text-amber-400">Book</span>Corp
        </a>
        <p class="text-sm mb-4 leading-relaxed max-w-xs">Your trusted partner for seamless bookings and reservations. Excellence in every appointment.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06-.02-.09-.036l-2.126-1.643-.092-.073-.016.035c-.443.916-1.077 1.636-1.897 2.164a7.994 7.994 0 01-.845.41c-.24.088-.476.162-.714.22h-.032c-.08-.009-.16-.017-.238-.024l-.168-.005a.75.75 0 01-.132-.016 10.022 10.022 0 01-1.74-1.218c-.894-.78-1.558-1.765-1.92-2.883-.178-.54-.287-1.11-.32-1.696-.016-.277-.023-.556-.023-.836 0-3.328 2.672-6 6-6h2v-2h-3C6.672 5 4 7.672 4 10.999c0 .28.007.559.023.836.033.586.142 1.156.32 1.696.363 1.117 1.027 2.102 1.92 2.883 1.01 1.008 2.247 1.624 3.6 1.838.08.012.16.026.24.037.03.004.06.006.09.006v.05zM22 12c0-3.328-2.672-6-6-6h-2v2h3c2.203 0 4 1.797 4 4 0 .28-.007.559-.023.836-.033.586-.142 1.156-.32 1.696-.363 1.117-1.027 2.102-1.92 2.883-1.01 1.008-2.247 1.624-3.6 1.838-.08.012-.16.026-.24.037-.03.004-.06.006-.09.006v.05z" fill="currentColor" />
              <path d="M12 9a3 3 0 100 6 3 3 0 000-6z" fill="currentColor" />
              <path d="M12 11a1 1 110-2 1 1 0 000 2z" fill="currentColor" />
              <circle cx="12" cy="12" r="3" opacity="0" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M.057 1.7L.023 1.644l.01-.01c.148-.12.296-.24.444-.36l.01-.008L.5.5C.42-.5.5-.5.42-.5.42-.5.25.5-.5.5c-.75 0 1.25-.5 1.25-.5.2-.2.2-.2-.2-.2C1.72.1-.22-.2-.22-.2.02-.2-.22-.2.2-.2Z" fill="none"/>
              <path d="M19.5 0h-15C2.239 0 0 2.239 0 4.999v14.002C0 21.761 2.239 24 4.5 24h15c2.761 0 5-2.239 5-4.999V4.999C24 2.239 21.761 0 19.5 0zm-4.053 2.164c.731.066 1.34.195 1.776.326.438.132.898.396 1.35.792.45.396.792.898 1.032 1.488.24.59.396 1.296.486 2.088.09.792.108 1.692.054 2.652-.054.96-.216 1.956-.486 2.94-.27.984-.666 1.836-1.188 2.556-.522.72-1.188 1.278-1.998 1.68-.81.402-1.692.684-2.61.846-1.22.216-2.592.29-4.104.22-.648-.027-1.314-.09-2.022-.189-.708-.099-1.395-.234-2.034-.396-.639-.162-1.224-.396-1.728-.693-.504-.297-.936-.666-1.296-1.107-.36-.441-.6-1-.72-1.68-.12-.68-.198-1.476-.234-2.388-.036-.912-.009-1.872.081-2.88.09-.96.252-1.896.486-2.796.234-.9.567-1.71.999-2.43.432-.72 1.008-1.278 1.728-1.68.72-.402 1.548-.684 2.484-.846 1.08-.18 2.304-.252 3.672-.216.702.018 1.413.081 2.115.195.702.114 1.377.261 2.016.486zm-.05-.008z" fill="currentColor"/>
            </svg>
            <span class="sr-only">LinkedIn</span>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About Us</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Services</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Pricing</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">FAQ</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Blog</a>
        </nav>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Support Center</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Developer API</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Terms of Service</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Privacy Policy</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Cookie Policy</a>
        </nav>
      </div>

      <!-- Contact Info / Newsletter -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2 mb-6">
          <p>123 Booking Ave, Suite 400</p>
          <p>Business City, BC 90210</p>
          <p class="mt-2"><a href="tel:+1234567890" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">+1 (234) 567-890</a></p>
          <p><a href="mailto:info@bookcorp.com" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">info@bookcorp.com</a></p>
        </address>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Newsletter</h3>
        <form class="flex flex-col sm:flex-row gap-2">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required
            class="w-full flex-auto rounded-md border border-stone-300 dark:border-stone-700 bg-white/50 dark:bg-stone-800 px-3.5 py-2 text-stone-800 dark:text-stone-200 shadow-sm placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400 sm:text-sm sm:leading-6"
            placeholder="Enter your email">
          <button type="submit"
            class="flex-none rounded-md bg-amber-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <div class="border-t border-stone-300 dark:border-stone-700 pt-8 mt-8 text-center text-sm">
      <p>&copy; <span id="current-year"></span> BookCorp. All rights reserved.</p>
    </div>
  </div>
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Comercio Brutalist_Retro_Media_Embed_E

Un componente de incrustación de medios complejo, receptivo y de estilo brutalista para el comercio electrónico, con alto contraste, una paleta de colores retro, compatibilidad con el modo oscuro y múltiples elementos interactivos para exhibiciones de productos.

Abrir Vista previa

                <div class="font-sans bg-[#F0E6D2] text-[#333333] dark:bg-[#1E272C] dark:text-[#E0E0E0] p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">
  <div class="max-w-7xl mx-auto border-4 border-[#8B0000] dark:border-[#FFD700] bg-[#EAE0C8] dark:bg-[#2C3E50] shadow-[10px_10px_0px_0px_#8B0000] dark:shadow-[10px_10px_0px_0px_#FFD700] relative overflow-hidden">
    <div class="absolute top-0 left-0 w-full h-full border-t-4 border-l-4 border-b-4 border-r-4 border-[#8B0000] dark:border-[#FFD700] pointer-events-none z-10"></div>
    
    <!-- Header Bar -->
    <div class="bg-[#8B0000] dark:bg-[#FFD700] text-[#F0E6D2] dark:text-[#1E272C] p-3 border-b-4 border-[#333333] dark:border-[#FFD700] relative z-20">
      <div class="flex items-center justify-between">
        <h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider">// PRODUCT SHOWCASE : ITEM #1337</h2>
        <div class="flex space-x-2">
          <button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">X</button>
          <button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">_</button>
          <button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">[]</button>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0 relative z-0">
      <!-- Main Media Area (left/top) -->
      <div class="md:col-span-2 lg:col-span-3 border-r-4 border-b-4 md:border-b-0 border-[#8B0000] dark:border-[#FFD700] p-4 md:p-6 lg:p-8 flex items-center justify-center bg-[#D2B48C] dark:bg-[#34495E]">
        <div class="w-full aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-4 border-[#333333] dark:border-[#FFD700] shadow-[5px_5px_0px_0px_#333333] dark:shadow-[5px_5px_0px_0px_#FFD700]">
          <!-- Placeholder for Video/Main Image -->
          <img src="https://picsum.photos/1000/562?random=1" alt="Main Product Media" class="w-full h-full object-cover grayscale opacity-90 hover:grayscale-0 hover:opacity-100 transition-all duration-300">
        </div>
      </div>

      <!-- Product Info / Controls (right/bottom) -->
      <div class="md:col-span-1 lg:col-span-1 p-4 md:p-6 lg:p-8 bg-[#ECC9A3] dark:bg-[#4A636F] flex flex-col justify-between border-b-4 md:border-b-0 md:border-l-4 md:border-t-0 border-[#8B0000] dark:border-[#FFD700]">
        <div>
          <h3 class="text-2xl sm:text-3xl font-bold uppercase mb-2 text-[#8B0000] dark:text-[#FFD700]">Vintage Gizmo XL</h3>
          <p class="text-base sm:text-lg mb-4 leading-tight text-[#333333] dark:text-[#E0E0E0]">A retro-futuristic device for analog data manipulation. Extremely rare. Acts like a charm, looks like a beast.</p>
          
          <div class="flex items-baseline mb-4">
            <p class="text-4xl font-extrabold text-[#A0522D] dark:text-[#FF9900] mr-2">$499.<span class="text-3xl">99</span></p>
            <p class="text-2xl line-through text-[#666666] dark:text-[#999999]">$699.<span class="text-xl">99</span></p>
          </div>

          <div class="mb-4 border-b-2 border-[#8B0000] dark:border-[#FFD700] pb-4">
            <h4 class="text-lg font-bold uppercase mb-2 text-[#8B0000] dark:text-[#FFD700]">// STATUS</h4>
            <div class="flex justify-around text-center">
              <div class="flex-1">
                <p class="text-xl font-bold text-[#333333] dark:text-[#E0E0E0]">IN STOCK</p>
                <p class="text-sm text-[#666666] dark:text-[#999999]">Qty: <span class="font-bold">1</span></p>
              </div>
              <div class="flex-1">
                <p class="text-xl font-bold text-[#E0B200] dark:text-[#99E000]">LIMITED</p>
                <p class="text-sm text-[#666666] dark:text-[#999999]">Edition</p>
              </div>
            </div>
          </div>

        </div>

        <div class="space-y-4">
          <button class="w-full py-4 bg-[#8B0000] dark:bg-[#FFD700] text-[#F0E6D2] dark:text-[#1E272C] text-xl font-extrabold uppercase border-4 border-[#333333] dark:border-[#1E272C] shadow-[5px_5px_0px_0px_#333333] dark:shadow-[5px_5px_0px_0px_#1E272C] hover:shadow-[2px_2px_0px_0px_#333333] dark:hover:shadow-[2px_2px_0px_0px_#1E272C] hover:translate-x-2 hover:translate-y-2 transition-all duration-150">
            ADD TO CART
          </button>
          <button class="w-full py-3 bg-[#A0522D] dark:bg-[#2C3E50] text-[#F0E6D2] dark:text-[#FFD700] text-lg font-bold uppercase border-2 border-[#333333] dark:border-[#FFD700] hover:bg-[#B0633C] dark:hover:bg-[#3A5060]">
            MORE DETAILS
          </button>
        </div>
      </div>

      <!-- Thumbnail Gallery -->
      <div class="col-span-1 md:col-span-3 lg:col-span-4 p-4 md:p-6 lg:p-8 border-t-4 border-[#8B0000] dark:border-[#FFD700] bg-[#D2B48C] dark:bg-[#34495E]">
        <h4 class="text-lg font-bold uppercase mb-4 text-[#8B0000] dark:text-[#FFD700]">// RELATED VISUALS</h4>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            <img src="https://picsum.photos/300/200?random=2" alt="Thumbnail 1" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            <img src="https://picsum.photos/300/200?random=3" alt="Thumbnail 2" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            <img src="https://picsum.photos/300/200?random=4" alt="Thumbnail 3" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            <img src="https://picsum.photos/300/200?random=5" alt="Thumbnail 4" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden sm:block">
            <img src="https://picsum.photos/300/200?random=6" alt="Thumbnail 5" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden lg:block">
            <img src="https://picsum.photos/300/200?random=7" alt="Thumbnail 6" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden xl:block">
            <img src="https://picsum.photos/300/200?random=8" alt="Thumbnail 7" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden xl:block">
            <img src="https://picsum.photos/300/200?random=9" alt="Thumbnail 8" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
        </div>
      </div>

      <!-- Customer Reviews / Related Products (Bottom Strip) -->
      <div class="col-span-1 md:col-span-3 lg:col-span-4 p-4 md:p-6 lg:p-8 border-t-4 border-[#8B0000] dark:border-[#FFD700] bg-[#ECC9A3] dark:bg-[#4A636F]">
        <h4 class="text-lg font-bold uppercase mb-4 text-[#8B0000] dark:text-[#FFD700]">// CUSTOMER OVERVIEW</h4>
        <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-8">
          <div class="flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Customer Avatar" class="w-24 h-24 rounded-full border-4 border-[#333333] dark:border-[#FFD700] shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xl font-bold text-[#A0522D] dark:text-[#FF9900] mb-2">"Absolutely RAW Power!"</p>
            <p class="text-base text-[#333333] dark:text-[#E0E0E0] mb-2">This Gizmo XL exceeded all my expectations. The brutalist design is a refreshing change, and its functionality is unmatched. Highly recommend for any serious collector.</p>
            <p class="text-sm text-[#666666] dark:text-[#999999]">- <span class="font-bold">J. DOE</span>, Verified Purchaser</p>
          </div>
        </div>
        <div class="mt-6 text-center">
          <button class="px-6 py-2 bg-[#333333] text-[#F0E6D2] dark:bg-[#1E272C] dark:text-[#FFD700] text-sm font-bold uppercase border-2 border-[#F0E6D2] dark:border-[#FFD700] hover:bg-[#555555] dark:hover:bg-[#334455] shadow-[3px_3px_0px_0px_#8B0000] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            READ ALL REVIEWS
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 26 27 28 29 30 ... 335

Componentes de búsqueda

Categorías

Todos los componentes