Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Retro_Vintage_Pastel_Finance_Toast_Notifications

Un componente de notificaciones de tostadas complejo y receptivo con una estética retro / vintage, combinación de colores pastel, diseñado para interfaces financieras / bancarias. Incluye soporte para modo oscuro y múltiples tipos de notificaciones.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-mono relative overflow-hidden">

  <!-- Retro CRT Scanline Overlay (Visual Effect Only) -->
  <div class="fixed inset-0 pointer-events-none z-50 opacity-10 dark:opacity-5" style="background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%;">
  </div>

  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-violet-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-fuchsia-300 dark:border-fuchsia-700 relative z-10 animate-fade-in-down">
    <div class="p-4 md:p-6 bg-pink-200 dark:bg-gray-900 rounded-t-sm border-b-2 border-fuchsia-400 dark:border-fuchsia-600">
      <div class="flex justify-between items-center">
        <h2 class="text-2xl font-bold text-fuchsia-800 dark:text-fuchsia-300 tracking-wider uppercase drop-shadow-sm">System Alerts</h2>
        <div class="flex space-x-1">
          <span class="block w-3 h-3 bg-red-400 rounded-full border border-red-500 shadow-inner"></span>
          <span class="block w-3 h-3 bg-yellow-400 rounded-full border border-yellow-500 shadow-inner"></span>
          <span class="block w-3 h-3 bg-lime-400 rounded-full border border-lime-500 shadow-inner"></span>
        </div>
      </div>
    </div>

    <div class="p-4 md:p-6 space-y-4">

      <!-- Success Notification -->
      <div class="flex items-start p-3 bg-lime-100 dark:bg-green-900 border-2 border-lime-400 dark:border-green-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right">
        <div class="flex-shrink-0 text-lime-700 dark:text-green-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-lime-800 dark:text-green-200">Transaction Complete!</p>
          <p class="text-xs md:text-sm text-lime-700 dark:text-green-300 mt-0.5">Your payment of <span class="font-bold">$1,200.00</span> to ACME Corp. was successful.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-lime-600 dark:text-green-400 hover:text-lime-800 dark:hover:text-green-200 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-green-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Warning Notification -->
      <div class="flex items-start p-3 bg-yellow-100 dark:bg-yellow-900 border-2 border-yellow-400 dark:border-yellow-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-200">
        <div class="flex-shrink-0 text-yellow-700 dark:text-yellow-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.332 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-yellow-800 dark:text-yellow-200">Attention Required</p>
          <p class="text-xs md:text-sm text-yellow-700 dark:text-yellow-300 mt-0.5">High balance on Savings Account: <span class="font-bold">$98,765.43</span>. Consider diversifying.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-yellow-600 dark:text-yellow-400 hover:text-yellow-800 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Error Notification -->
      <div class="flex items-start p-3 bg-red-100 dark:bg-red-900 border-2 border-red-400 dark:border-red-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-400">
        <div class="flex-shrink-0 text-red-700 dark:text-red-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-red-800 dark:text-red-200">Payment Failed!</p>
          <p class="text-xs md:text-sm text-red-700 dark:text-red-300 mt-0.5">Unable to process <span class="font-bold">$50.00</span> payment. Insufficient funds.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Info Notification with Avatar -->
      <div class="flex items-start p-3 bg-blue-100 dark:bg-blue-900 border-2 border-blue-400 dark:border-blue-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-600">
        <div class="flex-shrink-0 text-blue-700 dark:text-blue-300 text-xl md:text-2xl pt-0.5">
          <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md object-cover">
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-blue-800 dark:text-blue-200">New Message from Support</p>
          <p class="text-xs md:text-sm text-blue-700 dark:text-blue-300 mt-0.5">Your inquiry regarding account #<span class="font-semibold">XYS890</span> has been answered.</p>
          <a href="#" class="text-xs text-blue-600 dark:text-blue-400 hover:underline mt-1 block">View Details</a>
        </div>
        <button class="flex-shrink-0 p-1 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

    </div>

    <div class="p-4 md:p-6 bg-pink-200 dark:bg-gray-900 rounded-b-sm border-t-2 border-fuchsia-400 dark:border-fuchsia-600 flex justify-center text-sm text-fuchsia-700 dark:text-fuchsia-400">
      <p>Notifications generated: <span class="font-bold">4</span></p>
    </div>

  </div>

  <!-- Tailwind JIT Animations (add to tailwind.config.js for full effect) -->
  <style>
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-down {
      animation: fadeInDown 0.6s ease-out forwards;
    }

    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .animate-slide-in-right {
      animation: slideInRight 0.5s ease-out forwards;
    }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-400 { animation-delay: 0.4s; }
    .animation-delay-600 { animation-delay: 0.6s; }
  </style>
</div>

Componente de inicio de sesión/registro

Un componente de inicio de sesión/registro responsivo con un tema degradado de océano/azul, transiciones suaves y compatibilidad con el modo oscuro, adecuado para sitios web de eventos y conferencias.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-xl lg:max-w-4xl flex flex-col md:flex-row transition-all duration-500 ease-in-out transform hover:scale-105">
    <!-- Left Side: Image/Info Section (Visible on MD and larger) -->
    <div class="relative hidden md:flex md:w-1/2 lg:w-2/3 bg-gradient-to-br from-blue-600 to-indigo-800 dark:from-blue-900 dark:to-purple-950 p-8 flex-col justify-center items-center text-white transition-all duration-500 ease-in-out">
      <div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
      <div class="relative z-10 text-center opacity-0 md:opacity-100 transition-opacity duration-1000 ease-in-out">
        <h2 class="text-4xl lg:text-5xl font-extrabold mb-4 drop-shadow-lg">Welcome to Horizon Events</h2>
        <p class="text-lg lg:text-xl font-light leading-relaxed">Connect, learn, and grow. Your gateway to unforgettable experiences and valuable networking opportunities.</p>
        <div class="mt-8">
          <button class="px-6 py-3 bg-white text-blue-700 dark:bg-gray-700 dark:text-white rounded-full font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
            Learn More
          </button>
        </div>
      </div>
    </div>

    <!-- Right Side: Form Section -->
    <div class="w-full md:w-1/2 lg:w-1/3 p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-center bg-white dark:bg-gray-800 transition-all duration-500 ease-in-out">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-200 mb-6 text-center md:text-left transition-colors duration-300">
        <span class="block md:inline">Join Us</span> <span class="hidden md:inline text-blue-600 dark:text-blue-400">Now</span>
      </h2>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-300">Email Address</label>
          <div class="mt-1">
            <input id="email" name="email" type="email" autocomplete="email" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-base bg-gray-50 dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out placeholder:text-sm md:placeholder:text-base">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-300">Password</label>
          <div class="mt-1">
            <input id="password" name="password" type="password" autocomplete="current-password" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-base bg-gray-50 dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out placeholder:text-sm md:placeholder:text-base">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:bg-gray-700 dark:border-gray-600 rounded cursor-pointer">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">Remember me</label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 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-md shadow-sm text-base font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-700 dark:to-indigo-800 hover:from-blue-700 hover:to-indigo-800 dark:hover:from-blue-800 dark:hover:to-indigo-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
          New to Horizon Events?
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300">Sign Up Today!</a>
        </p>
      </div>

      <div class="mt-8 relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 transition-colors duration-300">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3">
        <div>
          <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:-translate-y-px">
            <img src="https://www.svgrepo.com/show/355037/google.svg" alt="Google icon" class="h-5 w-5 mr-2"/>
            Google
          </button>
        </div>
        <div>
          <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:-translate-y-px">
            <img src="https://www.svgrepo.com/show/475656/facebook-color.svg" alt="Facebook icon" class="h-5 w-5 mr-2"/>
            Facebook
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de línea de tiempo

Un componente de línea de tiempo complejo y receptivo diseñado para plataformas educativas, con un diseño limpio y minimalista centrado en la tipografía con tonos tierra y soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-100 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold mb-12 text-center leading-tight dark:text-gray-50">
      Learning Journey Timeline
    </h1>

    <div class="space-y-16">
      <!-- Timeline Item 1 -->
      <div class="relative flex flex-col md:flex-row items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pr-8 md:text-right">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 1</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Foundations of Web Development</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Dive into the essential building blocks of the web. Learn HTML for structuring content and CSS for styling beautiful web pages. Discover browser developer tools and basic responsive design principles.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">HTML5</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CSS3</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Responsive Design</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=1" alt="Foundations" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 40 hours
          </div>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="relative flex flex-col md:flex-row-reverse items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pl-8 md:text-left">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 2</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Interactive Frontend with JavaScript</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Unlock dynamic behavior using JavaScript. Master DOM manipulation, event handling, and asynchronous programming. Build interactive user interfaces and enhance user experience.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">JavaScript ES6+</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">DOM Manipulation</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">APIs (Fetch)</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=2" alt="Frontend Interactive" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 50 hours
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="relative flex flex-col md:flex-row items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pr-8 md:text-right">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 3</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Modern Frameworks: Building SPAs</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Step into the world of Single Page Applications. Learn the fundamentals of popular JavaScript frameworks like React, Vue, or Angular. Understand component-based architecture and state management.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">React/Vue/Angular</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Component Architecture</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">State Management</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=3" alt="Modern Frameworks" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 60 hours
          </div>
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="relative flex flex-col md:flex-row-reverse items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pl-8 md:text-left">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 4</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Backend Fundamentals & Databases</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Explore server-side development. Learn to build RESTful APIs with Node.js and Express. Understand database concepts with SQL (PostgreSQL) and NoSQL (MongoDB) and connect them to your frontend.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Node.js</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Express.js</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">SQL/NoSQL DBs</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=4" alt="Backend & Databases" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 70 hours
          </div>
        </div>
      </div>

      <!-- Timeline Item 5 -->
      <div class="relative flex flex-col md:flex-row items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pr-8 md:text-right">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 5</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Deployment & DevOps Basics</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Take your applications live. Understand deployment strategies, CI/CD pipelines, and cloud platforms like Netlify/Vercel for frontend and Heroku/AWS for backend. Learn basic version control with Git.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Git & GitHub</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CI/CD</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Cloud Deployment</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=5" alt="Deployment & DevOps" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 35 hours
          </div>
        </div>
      </div>

      <!-- Example of the final step, could be a certificate or portfolio link -->
      <div class="relative flex flex-col items-center justify-center mt-12">
        <div class="absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-green-700 dark:bg-green-600 border-2 border-white dark:border-gray-900 z-10"></div>
        <h2 class="text-3xl font-bold text-center text-green-700 dark:text-green-500 mt-8 mb-6">
          Your Journey Completed!
        </h2>
        <p class="text-lg text-gray-700 dark:text-gray-300 text-center max-w-2xl mx-auto">
          Congratulations on completing your full-stack web development journey! You are now equipped with the skills to build and deploy modern web applications. Continue exploring and building!
        </p>
        <button class="mt-8 px-6 py-3 bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-lg shadow-md transition-colors duration-300">
          Explore More Courses
        </button>
      </div>
    </div>
  </div>
</div>

Componente de autenticación de dos factores

Un componente de autenticación de dos factores (2FA) complejo y receptivo diseñado con degradados de color océano/azul y transiciones suaves, adecuado para sitios web de noticias y medios de comunicación. Incluye soporte para el modo oscuro y una rica interfaz interactiva.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 ease-in-out group hover:shadow-2xl dark:shadow-blue-900/50 border border-blue-50/50 dark:border-blue-900 relative">

    <!-- Background Blob/Gradient Effect -->
    <div class="absolute -top-20 -left-20 w-64 h-64 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-blue-700 dark:to-blue-900 transition-all duration-500 ease-in-out"></div>
    <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-gradient-to-br from-cyan-400 to-sky-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-2000 animate-blob dark:from-sky-700 dark:to-teal-900 transition-all duration-500 ease-in-out"></div>
    <div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-indigo-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-4000 animate-blob dark:from-purple-700 dark:to-fuchsia-900 transition-all duration-500 ease-in-out"></div>

    <div class="p-8 sm:p-10 relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 transform transition-all duration-500 ease-in-out group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
        </svg>
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mt-4 leading-tight group-hover:text-amber-500 dark:group-hover:text-indigo-400 transition-colors duration-500 ease-in-out">
          Two-Factor Authentication
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
          Please enter the 6-digit code sent to your device.
        </p>
      </div>

      <form action="#" method="POST">
        <div class="space-y-6">
          <div class="flex justify-center space-x-2 sm:space-x-4">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <span class="h-full w-2 sm:w-4 flex items-center justify-center text-gray-400 dark:text-gray-500 text-4xl">-</span>
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
          </div>

          <button type="submit" class="w-full flex justify-center py-4 px-6 border border-transparent rounded-full shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75 dark:from-blue-700 dark:to-blue-900 dark:hover:from-blue-600 dark:hover:to-blue-800 dark:focus:ring-blue-700 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group-hover:shadow-2xl group-hover:shadow-blue-500/40 dark:group-hover:shadow-blue-900/60">
            Verify Code
          </button>
        </div>
      </form>

      <div class="mt-8 text-center text-sm">
        <p class="mb-2 text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
          Didn't receive the code?
        </p>
        <p>
          <a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
            Resend Code
          </a>
          <span class="mx-2 text-gray-400 dark:text-gray-600">•</span>
          <a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
            Use another method
          </a>
        </p>

        <div class="mt-8 pt-6 border-t border-blue-100 dark:border-blue-900/50 transition-colors duration-500 ease-in-out">
          <p class="text-xs text-gray-500 dark:text-gray-400">
            Having trouble? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">Contact Support</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the blob animation - Tailwind CSS doesn't support complex keyframe animations directly */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Styles for input focus/auto-tabbing - requires JS for full functionality, but basic styling can be here */
  .space-x-2 > input:focus, .space-x-4 > input:focus {
    outline: none !important; /* Remove default outline */
  }
</style>

Componente de la barra de progreso

Un componente de barra de progreso complejo y receptivo para servicios gubernamentales/públicos, con un diseño limpio y minimalista con una paleta monocromática y acento brillante, compatibilidad con modo oscuro e información de progreso detallada.

Abrir Vista previa

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

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 lg:p-10">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100 leading-tight">Application Progress Overview</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl text-base sm:text-lg">Track the current status of your public service application. Each step indicates a critical milestone in processing.</p>

      <!-- Global Progress Bar -->
      <div class="mb-8">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200">Overall Completion</span>
          <span class="text-xl sm:text-2xl font-bold text-teal-600 dark:text-teal-500">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
          <div class="bg-teal-600 dark:bg-teal-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Step-by-step Progress -->
      <div class="space-y-6 sm:space-y-8">

        <!-- Step 1: Completed -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">
              <svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M5 13l4 4L19 7"></path></svg>
            </div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">1. Application Submission</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Your application was successfully submitted on 2023-10-26.</p>
            <div class="flex items-center text-teal-600 dark:text-teal-500 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" 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>
              Completed
            </div>
          </div>
        </div>

        <!-- Step 2: Completed -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">
              <svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M5 13l4 4L19 7"></path></svg>
            </div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">2. Document Verification</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">All submitted documents have been verified and confirmed.</p>
            <div class="flex items-center text-teal-600 dark:text-teal-500 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" 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>
              Completed
            </div>
          </div>
        </div>

        <!-- Step 3: In Progress -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">3</div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">3. Review by Case Officer</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Your application is currently under review by a dedicated case officer. This may take up to 3-5 business days.</p>
            <div class="flex items-center text-blue-600 dark:text-blue-400 mt-2 text-sm sm:text-base leading-none">
              <div class="w-3 h-3 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse mr-2"></div>
              In Progress
            </div>
          </div>
        </div>

        <!-- Step 4: Pending -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center text-gray-500 dark:text-gray-400 text-xl sm:text-2xl font-bold">4</div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">4. Final Approval</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Awaiting final approval once the review process is complete.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.147-1.3 2.912 0l5.572 9.573A1.5 1.5 0 0116 14.5H4c-.848 0-1.395-.837-.943-1.628l5.572-9.573zM10 15a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              Pending
            </div>
          </div>
        </div>

      </div>

      <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Last updated: <span class="font-medium">2023-11-01, 10:30 AM (GMT+1)</span></p>
        <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2">For inquiries, please contact our support team at <a href="mailto:[email protected]" class="text-teal-600 dark:text-teal-500 hover:underline">[email protected]</a>.</p>
      </div>
    </div>
  </div>

</div>

Componente del formulario de registro

Un componente de formulario de registro simple y receptivo con efectos de neón / brillo, esquema de color neutro frío y soporte de modo oscuro, adecuado para sitios web relacionados con la fotografía.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in border border-gray-200 dark:border-gray-700 relative">
    <!-- Neon Box Shadow Effect -->
    <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 rounded-lg blur opacity-75 animate-pulse dark:from-blue-600 dark:via-purple-700 dark:to-pink-700 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
    <div class="relative p-8 space-y-6 bg-white dark:bg-gray-800 rounded-lg">

      <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-6 tracking-tight animate-fade-down">
        Register for <span class="text-blue-500 dark:text-blue-400">Inspiration</span>
      </h2>

      <form class="space-y-5">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Full Name
          </label>
          <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Full Name">
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Email Address
          </label>
          <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Email Address">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Password
          </label>
          <input type="password" id="password" name="password" placeholder="••••••••" autocomplete="new-password" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Password">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Confirm Password
          </label>
          <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••" autocomplete="new-password" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Confirm Password">
        </div>

        <button type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white
            bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600
            hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-700 dark:hover:to-purple-700
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400
            transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
            relative overflow-hidden group"
          aria-label="Register Account">
            Register
            <!-- Small glow effect on button hover -->
            <span class="absolute inset-0 w-full h-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out bg-gradient-to-r from-blue-300 to-purple-300 dark:from-blue-500 dark:to-purple-500 opacity-20"></span>
        </button>
      </form>

      <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        Already have an account?
        <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200"
          aria-label="Login Link">
          Sign in
        </a>
      </p>
    </div>
  </div>
</div>

<!-- To demonstrate the glow/pulse effect better, ensure these keyframe animations are present in your CSS setup (e.g., in a global CSS file or via Tailwind's JIT mode if configured) -->
<style>
  @keyframes pulse { 
    0%, 100% { 
      opacity: 0.75;
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
    }
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  .animate-fade-down {
    animation: fade-down 0.5s ease-out forwards;
  }
</style>

Organic_Nature_Loader_Real_Estate

Un componente de carga simple, orgánico e inspirado en la naturaleza para plataformas inmobiliarias, con líneas fluidas y colores vibrantes y de alta saturación con capacidad de respuesta total y compatibilidad con modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 dark:from-slate-900 dark:via-blue-950 dark:to-teal-950 p-4">
  <div class="relative w-32 h-32 md:w-48 md:h-48 group">
    <!-- Outer flowing circle -->
    <div class="absolute inset-0 rounded-full border-4 border-t-emerald-400 border-r-teal-500 border-b-cyan-400 border-l-lime-300 dark:border-t-emerald-700 dark:border-r-teal-800 dark:border-b-cyan-700 dark:border-l-lime-600 animate-spin-slow origin-center ease-in-out scale-100 group-hover:scale-110 transition-transform duration-500"></div>

    <!-- Inner flowing circle -->
    <div class="absolute inset-4 rounded-full border-4 border-t-teal-400 border-r-cyan-500 border-b-lime-400 border-l-emerald-300 dark:border-t-teal-700 dark:border-r-cyan-800 dark:border-b-lime-700 dark:border-l-emerald-600 animate-[spin-reverse_4s_linear_infinite] origin-center rotate-45 scale-90 group-hover:scale-100 transition-transform duration-500"></div>

    <!-- Central organic shape placeholder -->
    <div class="absolute inset-8 md:inset-12 bg-gradient-to-br from-emerald-300 via-teal-400 to-cyan-300 dark:from-emerald-600 dark:via-teal-700 dark:to-cyan-600 rounded-full flex items-center justify-center overflow-hidden transform animate-pulse-slight origin-center group-hover:rotate-12 transition-transform duration-500 shadow-md dark:shadow-lg">
      <svg class="w-10 h-10 md:w-16 md:h-16 text-white dark:text-gray-200 opacity-80" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 3.394l6 6H6l6-6zM7 14h10v4H7v-4z"/>
      </svg>
    </div>

    <!-- Organic-like leaf/petal elements (simplified for loader) -->
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-emerald-400 dark:bg-emerald-600 animate-[leaf-pulse_2s_ease-in-out_infinite_0s] transform rotate-45 origin-bottom-right group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute bottom-0 right-1/2 translate-x-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-teal-400 dark:bg-teal-600 animate-[leaf-pulse_2s_ease-in-out_infinite_0.5s] transform -rotate-45 origin-top-left group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute top-1/2 left-0 -translate-y-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-cyan-400 dark:bg-cyan-600 animate-[leaf-pulse_2s_ease-in-out_infinite_1s] transform rotate-135 origin-top-right group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute bottom-1/2 right-0 translate-y-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-lime-400 dark:bg-lime-600 animate-[leaf-pulse_2s_ease-in-out_infinite_1.5s] transform -rotate-135 origin-bottom-left group-hover:scale-125 transition-transform duration-500"></div>
  </div>

  <style>
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes pulse-slight {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.95; }
    }

    @keyframes leaf-pulse {
      0%, 100% { transform: translateY(0) scale(1) rotate(attr(data-rotate-initial)); opacity: 1; }
      50% { transform: translateY(-5px) scale(1.1) rotate(attr(data-rotate-mid)); opacity: 0.8; }
    }
    /* Custom property for rotation */
    .absolute:nth-of-type(3)[data-rotate-initial="45deg"] { transform: rotate(45deg); }
    .absolute:nth-of-type(3)[data-rotate-mid="55deg"] { transform: rotate(55deg); }
  </style>
</div>

Luxury_Premium_CAPTCHA_Weather_Component

Un componente CAPTCHA complejo y de temática lujosa para aplicaciones meteorológicas/climáticas, con colores neutros fríos, tipografía sofisticada y diseño receptivo con soporte para modo oscuro. Incluye elementos como un desafío visual, una pantalla de 'Clima actual' y una sección de 'Datos climáticos'.

Abrir Vista previa

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-10">
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b border-gray-100 dark:border-gray-700">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight mb-2 sm:mb-0">
          ClimateGuard Verification
        </h1>
        <div class="flex items-center space-x-3 text-gray-500 dark:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
          </svg>
          <span class="text-sm sm:text-base font-medium">Secure Access to Climate Data</span>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
        <div class="flex flex-col">
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Verify You Are Human</h2>
          <p class="text-gray-600 dark:text-gray-300 text-lg mb-6 leading-relaxed">
            To proceed and access comprehensive climate data, please complete the security challenge below.
            This helps us ensure data integrity and protect against automated access.
          </p>

          <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-inner border border-gray-100 dark:border-gray-600 mb-6">
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Click on all images containing <span class="text-blue-600 dark:text-blue-400">'Stratocumulus Clouds'</span>:</p>
            <div class="grid grid-cols-3 gap-2 sm:gap-3">
              <button aria-label="Image 1" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1041/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <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" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 2" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1018/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <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" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 3" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/23/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <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" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 4" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1053/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <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" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 5" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/10/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <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" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 6" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1004/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <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" />
                  </svg>
                </div>
              </button>
            </div>
            <div class="flex justify-between items-center mt-6">
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.383m1.342 8.868L9.932 20m5.39-16.712L15.932 4.07m-5.463 8.356L2 10.978L6 6L10 10.978L6 14L2 10.978" />
                </svg>
                New Challenge
              </button>
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.898 8.016l-3.69-3.69A2.25 2.25 0 0014.545 3H9.455c-.876 0-1.724.35-2.355.981L3.414 8.016m16.484 0l-3.69 3.69-3.69 3.69-3.69-3.69-3.69-3.69m7.38 0L9.454 3c-.876-.35-1.724-.981-2.355-2.355L3.414.016M12 21a9 9 0 100-18 9 9 0 000 18z" />
                </svg>
                Audio Challenge
              </button>
            </div>
          </div>

          <button type="submit" class="w-full py-4 text-lg font-bold bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white rounded-xl shadow-lg transition-all duration-300 transform active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
            Validate Access
            <span class="ml-2 inline-block transition-transform group-hover:translate-x-1">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0zM4 10a1 1 0 011-1h9a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" />
              </svg>
            </span>
          </button>

        </div>

        <div class="space-y-8">
          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Current Weather Overview</h2>
            <div class="bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 rounded-2xl p-6 sm:p-8 text-white shadow-xl transform transition-all duration-300 hover:scale-[1.02]">
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-5xl font-extrabold">24°C</p>
                  <p class="text-xl font-medium">London</p>
                </div>
                <img src="https://www.flaticon.com/svg/static/icons/svg/861/861056.svg" alt="Sunny icon" class="w-20 h-20 filter drop-shadow-lg">
              </div>
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span>Wind: 15 km/h</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.006-7.82l-.956-.956M15.82 4.18l.956-.956m-7.82 15.64l-.956.956m7.82-15.64l.956.956m-7.82 15.64l.956.956m-7.82 15.64l-.956.956M4.18 15.82l-.956.956m-1.956-6.75l.956-.956m15.64 7.82l.956.956M4.18 4.18l-.956-.956" />
                  </svg>
                  <span>Humidity: 65%</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.7L13.257 21a2 2 0 01-3.514 0L6.343 16.7A8 8 0 1117.657 16.7z" />
                  </svg>
                  <span>UV Index: 7 (High)</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
                  </svg>
                  <span>Precipitation: 0%</span>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Global Climate Data Insights</h2>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 sm:p-8 shadow-inner border border-gray-100 dark:border-gray-600">
              <div class="flex items-start mb-4">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Climate scientist profile" class="w-16 h-16 rounded-full mr-4 shadow-lg border-2 border-blue-500 dark:border-blue-400">
                <p class="text-gray-700 dark:text-gray-200 text-lg">
                  "Recent data indicates a significant increase in global average temperatures. Urgent action is needed."
                  <br>
                  <span class="font-medium text-blue-600 dark:text-blue-400 text-sm">- Dr. Elara Vance, Climatologist</span>
                </p>
              </div>
              <ul class="list-none space-y-3 text-gray-600 dark:text-gray-300">
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6a3 3 0 01-3-3V6zm4 0a1 1 0 011-1h2a1 1 0 110 2H8a1 1 0 01-1-1zm1 3a1 1 0 100 2h2a1 1 0 100-2H8z" clip-rule="evenodd" />
                  </svg>
                  Average Global Temperature: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">+1.2°C since pre-industrial levels</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                  </svg>
                  CO2 Concentration: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">419 ppm (Parts Per Million)</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l-2.293 2.293A1 1 0 0015 13.586V15h3a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2v-2a2 2 0 012-2h3.586l2.293-2.293A1 1 0 0010.586 1L1 18.293V18h3.586l2.293-2.293A1 1 0 006 14.586V1h3a2 2 0 012 2v1H6zm4 0V5a1 1 0 00-1-1H9a1 1 0 00-1 1v1h2z" clip-rule="evenodd" />
                  </svg>
                  Sea Level Rise: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">~3.6 mm/year</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
        <p>&copy; 2023 ClimateGuard. All rights reserved. Your data security is our priority.</p>
      </div>
    </div>
  </div>
</div>

Componente interactivo de entrega de alimentos

Un componente complejo e interactivo de entrega de alimentos y restaurante con efectos de brillo de neón, colores vibrantes y múltiples elementos interactivos. Diseñado para la capacidad de respuesta y la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="font-sans bg-gray-950 text-gray-50 dark:bg-black p-4 sm:p-6 lg:p-8 relative overflow-hidden">

  <!-- Glowing Background Elements -->
  <div class="absolute top-0 -left-64 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-purple-600"></div>
  <div class="absolute top-0 -right-64 w-96 h-96 bg-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-rose-600"></div>
  <div class="absolute -bottom-16 left-1/4 transform -translate-x-1/2 w-96 h-96 bg-green-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-lime-600"></div>

  <div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
    <div class="text-center mb-10 lg:mb-16">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-4 animate-text-glow-slow relative">
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-pink-400 to-green-400 dark:from-sky-400 dark:via-fuchsia-400 dark:to-lime-400">Feast with the Glow!</span>
      </h2>
      <p class="text-lg sm:text-xl text-gray-300 dark:text-gray-400 mb-8 max-w-3xl mx-auto animate-fade-in animation-delay-500">
        Discover exquisite flavors and glowing deals, delivered fresh to your door.
      </p>

      <!-- Search Bar with Neon Border -->
      <div class="relative max-w-xl mx-auto">
        <input type="text" placeholder="Search for restaurants or dishes..." class="w-full p-4 pl-12 rounded-xl bg-gray-800 dark:bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-4 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black transition-all duration-300 
          border-2 border-transparent focus:border-blue-500 
          shadow-neon-blue-sm hover:shadow-neon-blue 
          dark:shadow-neon-purple-sm dark:hover:shadow-neon-purple 
          focus:shadow-neon-blue-md dark:focus:shadow-neon-purple-md">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 10m-7 0a7 7 0 1014 0a7 7 0 10-14 0"></path><path d="m21 21-6-6"></path></svg>
      </div>
    </div>

    <!-- Category Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
      <!-- Category 1 -->
      <div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300 
        bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
        border-2 border-transparent 
        hover:border-blue-500 dark:hover:border-purple-500
        shadow-neon-blue-sm hover:shadow-neon-blue-md 
        dark:shadow-neon-purple-sm dark:hover:shadow-neon-purple-md
        cursor-pointer">
        <img src="https://picsum.photos/id/1080/100/100" alt="Pizza" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-blue-500 dark:ring-purple-500 glow-on-hover-img">
        <span class="font-semibold text-lg text-white group-hover:text-blue-300 dark:group-hover:text-purple-300 transition-colors duration-200 glow-on-text">Pizza</span>
      </div>
      <!-- Category 2 -->
      <div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300 
        bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
        border-2 border-transparent 
        hover:border-pink-500 dark:hover:border-rose-500
        shadow-neon-pink-sm hover:shadow-neon-pink-md 
        dark:shadow-neon-rose-sm dark:hover:shadow-neon-rose-md
        cursor-pointer">
        <img src="https://picsum.photos/id/1050/100/100" alt="Burgers" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-pink-500 dark:ring-rose-500 glow-on-hover-img">
        <span class="font-semibold text-lg text-white group-hover:text-pink-300 dark:group-hover:text-rose-300 transition-colors duration-200 glow-on-text">Burgers</span>
      </div>
      <!-- Category 3 -->
      <div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300 
        bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
        border-2 border-transparent 
        hover:border-green-500 dark:hover:border-lime-500
        shadow-neon-green-sm hover:shadow-neon-green-md 
        dark:shadow-neon-lime-sm dark:hover:shadow-neon-lime-md
        cursor-pointer">
        <img src="https://picsum.photos/id/1005/100/100" alt="Sushi" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-green-500 dark:ring-lime-500 glow-on-hover-img">
        <span class="font-semibold text-lg text-white group-hover:text-green-300 dark:group-hover:text-lime-300 transition-colors duration-200 glow-on-text">Sushi</span>
      </div>
      <!-- Category 4 -->
      <div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300 
        bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
        border-2 border-transparent 
        hover:border-yellow-500 dark:hover:border-yellow-500
        shadow-neon-yellow-sm hover:shadow-neon-yellow-md 
        dark:shadow-neon-orange-sm dark:hover:shadow-neon-orange-md
        cursor-pointer">
        <img src="https://picsum.photos/id/200/100/100" alt="Desserts" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-yellow-500 dark:ring-orange-500 glow-on-hover-img">
        <span class="font-semibold text-lg text-white group-hover:text-yellow-300 dark:group-hover:text-orange-300 transition-colors duration-200 glow-on-text">Desserts</span>
      </div>
    </div>

    <!-- Featured Restaurants Section -->
    <h3 class="text-3xl sm:text-4xl font-bold mb-8 text-center text-white relative animate-fade-in animation-delay-700">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-green-400 dark:from-fuchsia-400 dark:to-lime-400">Top Rated Establishments</span>
    </h3>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Restaurant Card 1 -->
      <div class="group relative p-6 rounded-xl overflow-hidden 
        bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
        border-2 border-transparent 
        hover:border-blue-500 dark:hover:border-purple-500
        shadow-neon-blue-sm hover:shadow-neon-blue-md transition-all duration-300 cursor-pointer">
        <img src="https://picsum.photos/id/1060/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300 ">
        <h4 class="text-xl font-bold mb-2 text-white group-hover:text-blue-300 dark:group-hover:text-purple-300 transition-colors duration-200">The Neon Bistro</h4>
        <p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Gourmet fusion with a modern twist.</p>
        <div class="flex items-center text-yellow-400 mb-4">
          <svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
          <span class="ml-1 font-semibold">4.9</span> <span class="text-gray-400">(1.5k reviews)</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-lg font-semibold text-green-400 glow-on-text">Open Now</span>
          <button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300 
            bg-gradient-to-r from-blue-600 to-pink-600 
            hover:from-blue-500 hover:to-pink-500
            shadow-neon-blue-md hover:shadow-neon-blue-lg
            dark:from-purple-600 dark:to-rose-600
            dark:hover:from-purple-500 dark:hover:to-rose-500
            dark:shadow-neon-purple-md dark:hover:shadow-neon-purple-lg">
            Order Now
          </button>
        </div>
      </div>

      <!-- Restaurant Card 2 -->
      <div class="group relative p-6 rounded-xl overflow-hidden 
        bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
        border-2 border-transparent 
        hover:border-pink-500 dark:hover:border-rose-500
        shadow-neon-pink-sm hover:shadow-neon-pink-md transition-all duration-300 cursor-pointer">
        <img src="https://picsum.photos/id/1069/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300">
        <h4 class="text-xl font-bold mb-2 text-white group-hover:text-pink-300 dark:group-hover:text-rose-300 transition-colors duration-200">Glow Grille & Bar</h4>
        <p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Classic comfort food with a lively atmosphere.</p>
        <div class="flex items-center text-yellow-400 mb-4">
          <svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
          <span class="ml-1 font-semibold">4.7</span> <span class="text-gray-400">(980 reviews)</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-lg font-semibold text-green-400 glow-on-text">Open Now</span>
          <button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300 
            bg-gradient-to-r from-pink-600 to-green-600 
            hover:from-pink-500 hover:to-green-500
            shadow-neon-pink-md hover:shadow-neon-pink-lg
            dark:from-rose-600 dark:to-lime-600
            dark:hover:from-rose-500 dark:hover:to-lime-500
            dark:shadow-neon-rose-md dark:hover:shadow-neon-rose-lg">
            Order Now
          </button>
        </div>
      </div>

      <!-- Restaurant Card 3 -->
      <div class="group relative p-6 rounded-xl overflow-hidden 
        bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
        border-2 border-transparent 
        hover:border-green-500 dark:hover:border-lime-500
        shadow-neon-green-sm hover:shadow-neon-green-md transition-all duration-300 cursor-pointer">
        <img src="https://picsum.photos/id/1084/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300">
        <h4 class="text-xl font-bold mb-2 text-white group-hover:text-green-300 dark:group-hover:text-lime-300 transition-colors duration-200">Electric Eats Diner</h4>
        <p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Modern diner fare, always electrifying.</p>
        <div class="flex items-center text-yellow-400 mb-4">
          <svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
          <span class="ml-1 font-semibold">4.8</span> <span class="text-gray-400">(1.2k reviews)</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-lg font-semibold text-red-400 glow-on-text">Closed</span>
          <button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300 opacity-70 cursor-not-allowed 
            bg-gray-600 
            shadow-neon-gray-sm 
            dark:bg-gray-700 
            dark:shadow-neon-gray-sm">
            Closed
          </button>
        </div>
      </div>
    </div>

    <!-- Testimonials Section -->
    <h3 class="text-3xl sm:text-4xl font-bold mt-16 mb-8 text-center text-white relative animate-fade-in animation-delay-900">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-blue-400 dark:from-orange-400 dark:to-purple-400">What Our Patrons Say (Glowingly)</span>
    </h3>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Testimonial 1 -->
      <div class="relative p-6 rounded-xl 
        bg-gray-800/70 dark:bg-gray-900/70
        border-2 border-transparent 
        shadow-neon-blue-sm dark:shadow-neon-purple-sm transition-all duration-300">
        <p class="text-gray-300 dark:text-gray-400 text-lg mb-6 leading-relaxed">
          "Absolutely mesmerizing! The app's interface is stunning with its vibrant neon glow, making ordering food a truly delightful experience. And the delivery speed? Electrifyingly fast!"
        </p>
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full mr-4 ring-2 ring-blue-500 dark:ring-purple-500 glow-on-hover-img">
          <div>
            <p class="font-bold text-white text-lg">Anya Sharma</p>
            <p class="text-gray-400 text-sm">Food Enthusiast</p>
          </div>
        </div>
      </div>

      <!-- Testimonial 2 -->
      <div class="relative p-6 rounded-xl 
        bg-gray-800/70 dark:bg-gray-900/70
        border-2 border-transparent 
        shadow-neon-pink-sm dark:shadow-neon-rose-sm transition-all duration-300">
        <p class="text-gray-300 dark:text-gray-400 text-lg mb-6 leading-relaxed">
          "Never thought ordering takeout could be this cool! The UI feels futuristic and the glow effects are a fantastic touch. Found my new favorite burger joint through this platform. Highly recommend!"
        </p>
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full mr-4 ring-2 ring-pink-500 dark:ring-rose-500 glow-on-hover-img">
          <div>
            <p class="font-bold text-white text-lg">Michael Chen</p>
            <p class="text-gray-400 text-sm">Tech Foodie</p>
          </div>
        </div>
      </div>
    </div>

  </div>

  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }

    @keyframes text-glow-slow {
      0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(71, 185, 255, 0.4), 0 0 15px rgba(255, 0, 255, 0.4); }
      50% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(71, 185, 255, 0.6), 0 0 30px rgba(255, 0, 255, 0.6); }
    }
    .dark .animate-text-glow-slow {
      animation-name: dark-text-glow-slow;
    }
    @keyframes dark-text-glow-slow {
      0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(128, 0, 128, 0.4), 0 0 15px rgba(0, 255, 0, 0.4); }
      50% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(128, 0, 128, 0.6), 0 0 30px rgba(0, 255, 0, 0.6); }
    }

    @keyframes fade-in {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .animate-blob { animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
    .animate-fade-in { animation: fade-in 1s ease-out forwards; }
    .animation-delay-500 { animation-delay: 0.5s; }
    .animation-delay-700 { animation-delay: 0.7s; }
    .animation-delay-900 { animation-delay: 0.9s; }

    /* Tailwind Custom Shadows (approximate neon glow) */
    .shadow-neon-blue-sm {
      box-shadow: 0 0 5px rgba(0, 179, 255, 0.5);
    }
    .hover\:shadow-neon-blue,
    .focus\:shadow-neon-blue-md {
      box-shadow: 0 0 10px rgba(0, 179, 255, 0.7), 0 0 20px rgba(0, 179, 255, 0.5);
    }

    .shadow-neon-blue-md {
      box-shadow: 0 0 10px rgba(0, 179, 255, 0.7), 0 0 20px rgba(0, 179, 255, 0.5);
    }
    .hover\:shadow-neon-blue-lg {
      box-shadow: 0 0 15px rgba(0, 179, 255, 0.8), 0 0 30px rgba(0, 179, 255, 0.6);
    }

    .shadow-neon-pink-sm {
      box-shadow: 0 0 5px rgba(255, 0, 179, 0.5);
    }
    .hover\:shadow-neon-pink-md {
      box-shadow: 0 0 10px rgba(255, 0, 179, 0.7), 0 0 20px rgba(255, 0, 179, 0.5);
    }
    .hover\:shadow-neon-pink-lg {
      box-shadow: 0 0 15px rgba(255, 0, 179, 0.8), 0 0 30px rgba(255, 0, 179, 0.6);
    }

    .shadow-neon-green-sm {
      box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    }
    .hover\:shadow-neon-green-md {
      box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5);
    }
    .hover\:shadow-neon-green-lg {
      box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.6);
    }

    .shadow-neon-yellow-sm {
      box-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
    }
    .hover\:shadow-neon-yellow-md {
      box-shadow: 0 0 10px rgba(255, 255, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.5);
    }

    .shadow-neon-gray-sm {
      box-shadow: 0 0 5px rgba(128, 128, 128, 0.3);
    }

    /* Dark Mode specific shadows */
    .dark .shadow-neon-purple-sm {
      box-shadow: 0 0 5px rgba(128, 0, 128, 0.5);
    }
    .dark .hover\:shadow-neon-purple,
    .dark .focus\:shadow-neon-purple-md {
      box-shadow: 0 0 10px rgba(128, 0, 128, 0.7), 0 0 20px rgba(128, 0, 128, 0.5);
    }
    .dark .shadow-neon-purple-md {
      box-shadow: 0 0 10px rgba(128, 0, 128, 0.7), 0 0 20px rgba(128, 0, 128, 0.5);
    }
    .dark .hover\:shadow-neon-purple-lg {
      box-shadow: 0 0 15px rgba(128, 0, 128, 0.8), 0 0 30px rgba(128, 0, 128, 0.6);
    }

    .dark .shadow-neon-rose-sm {
      box-shadow: 0 0 5px rgba(255, 0, 100, 0.5);
    }
    .dark .hover\:shadow-neon-rose-md {
      box-shadow: 0 0 10px rgba(255, 0, 100, 0.7), 0 0 20px rgba(255, 0, 100, 0.5);
    }
    .dark .hover\:shadow-neon-rose-lg {
      box-shadow: 0 0 15px rgba(255, 0, 100, 0.8), 0 0 30px rgba(255, 0, 100, 0.6);
    }

    .dark .shadow-neon-lime-sm {
      box-shadow: 0 0 5px rgba(128, 255, 0, 0.5);
    }
    .dark .hover\:shadow-neon-lime-md {
      box-shadow: 0 0 10px rgba(128, 255, 0, 0.7), 0 0 20px rgba(128, 255, 0, 0.5);
    }
    .dark .hover\:shadow-neon-lime-lg {
      box-shadow: 0 0 15px rgba(128, 255, 0, 0.8), 0 0 30px rgba(128, 255, 0, 0.6);
    }

    .dark .shadow-neon-orange-sm {
      box-shadow: 0 0 5px rgba(255, 128, 0, 0.5);
    }
    .dark .hover\:shadow-neon-orange-md {
      box-shadow: 0 0 10px rgba(255, 128, 0, 0.7), 0 0 20px rgba(255, 128, 0, 0.5);
    }

    .dark .shadow-neon-gray-sm {
      box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
    }

    /* Image and text glow on hover */
    .glow-on-hover-img:hover {
      filter: drop-shadow(0 0 8px currentColor);
    }
    .group:hover .glow-on-text {
      filter: drop-shadow(0 0 5px currentColor);
    }


  </style>
</div>

Componente del menú de hamburguesas

Un componente complejo del menú de hamburguesas inspirado en papel / impresión con colores dulces / dulces, diseñado para sitios web gubernamentales / de servicio público. Cuenta con un diseño responsivo con soporte para modo oscuro, que imita el papel físico y los elementos de impresión con colores brillantes y alegres.

Abrir Vista previa

                <div class="font-sans bg-amber-50 dark:bg-zinc-800 text-slate-800 dark:text-zinc-50 min-h-screen relative">

  <!-- Main Content Area (for demonstration) -->
  <div class="p-8 md:p-12 lg:p-16 flex flex-col items-center justify-center min-h-screen">
    <h1 class="text-3xl md:text-5xl lg:text-6xl font-extrabold text-pink-700 dark:text-pink-400 mb-4 text-center leading-tight tracking-tight drop-shadow-md">
      Public Service Portal
    </h1>
    <p class="text-lg md:text-xl text-center max-w-2xl text-lime-700 dark:text-lime-300 mb-8">
      Your trusted source for government information and public services. Explore our resources.
    </p>
    <img src="https://picsum.photos/seed/public/800/450" alt="Placeholder Image" class="rounded-lg shadow-xl mb-8 border-4 border-l-rose-300 border-t-purple-300 border-r-mint-300 border-b-yellow-300 dark:border-l-rose-600 dark:border-t-purple-600 dark:border-r-emerald-600 dark:border-b-yellow-600 max-w-full h-auto">
    <button class="px-8 py-4 bg-gradient-to-br from-pink-500 to-rose-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 text-lg md:text-xl 
                   border-2 border-pink-700 dark:border-purple-300 
                   relative overflow-hidden group">
      <span class="absolute inset-0 bg-gradient-to-br from-pink-600 to-rose-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
      <span class="relative z-10">Learn More</span>
    </button>
  </div>

  <!-- Hamburger Menu Button -->
  <input type="checkbox" id="menu-toggle" class="hidden peer">
  <label for="menu-toggle" class="fixed top-4 right-4 z-50 p-3 bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800 rounded-full shadow-lg cursor-pointer transition-transform duration-300 hover:scale-105 active:scale-95 
                           border-2 border-purple-600 dark:border-indigo-600 
                           flex flex-col items-center justify-center group w-14 h-14">
    <span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:rotate-45 peer-checked:translate-y-2"></span>
    <span class="block w-8 h-1 bg-white rounded-full my-1 transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:opacity-0"></span>
    <span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:-rotate-45 peer-checked:-translate-y-2"></span>
  </label>

  <!-- Offcanvas Menu Overlay -->
  <div class="fixed inset-0 bg-black/40 dark:bg-black/80 backdrop-blur-sm z-40 opacity-0 pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto transition-opacity duration-500"></div>

  <!-- Offcanvas Menu Content -->
  <nav class="fixed top-0 right-0 h-full w-full max-w-xs md:max-w-sm lg:max-w-md bg-gradient-to-br from-pink-100 to-purple-100 dark:from-zinc-700 dark:to-stone-700 shadow-2xl transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-in-out z-50 
             p-6 md:p-8 overflow-y-auto 
             border-l-4 border-t-4 border-b-4 border-r-4 
             border-l-pink-400 border-t-purple-400 border-b-green-400 border-r-yellow-400 
             dark:border-l-pink-700 dark:border-t-purple-700 dark:border-b-emerald-700 dark:border-r-yellow-700 
             rounded-bl-3xl border-dashed">

    <div class="text-center mb-8 pb-4 border-b border-rose-300 dark:border-rose-600 relative">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-lime-300 dark:border-lime-500 shadow-md transform -rotate-3 hover:rotate-0 hover:scale-110 transition-all duration-300">
      <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 tracking-wide">Welcome!</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300">Citizen Services</p>

      <!-- Paper Clip Effect -->
      <div class="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-12 bg-gray-300 dark:bg-gray-600 rounded-b-lg shadow-inner z-0 
                   before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-4 before:bg-gradient-to-b before:from-gray-400 before:to-gray-300 dark:before:from-gray-700 dark:before:to-gray-600 before:rounded-t-lg 
                   after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-4 after:h-4 after:rounded-full after:bg-gray-500 dark:after:bg-gray-800 after:shadow-md"></div>

      <!-- Staple Effect -->
      <div class="absolute top-1/2 left-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
      <div class="absolute top-1/2 right-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
    </div>

    <ul class="space-y-4 md:space-y-5">
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-rose-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-rose-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-pink-600 dark:text-pink-400 group-hover:text-pink-800 dark:group-hover:text-pink-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V9a7 7 0 00-14 0v2z"></path>
          </svg>
          <span class="text-lg font-medium text-pink-800 dark:text-pink-200 group-hover:text-pink-900 dark:group-hover:text-pink-100 relative z-10">Home</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-purple-300 dark:hover:border-purple-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-purple-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
          <span class="text-lg font-medium text-purple-800 dark:text-purple-200 group-hover:text-purple-900 dark:group-hover:text-purple-100 relative z-10">Services</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-lime-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-lime-300 dark:hover:border-emerald-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-lime-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-lime-600 dark:text-lime-400 group-hover:text-lime-800 dark:group-hover:text-lime-200 relative z-10" 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 8h10M7 12h10M7 16h10M9 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3.013 0 006 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3 0 006 17v-1.5a2.5 2.5 0 015 0V17z"></path>
          </svg>
          <span class="text-lg font-medium text-lime-800 dark:text-lime-200 group-hover:text-lime-900 dark:group-hover:text-lime-100 relative z-10">News & Updates</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-yellow-300 dark:hover:border-yellow-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-yellow-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-yellow-600 dark:text-yellow-400 group-hover:text-yellow-800 dark:group-hover:text-yellow-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586L6 18H4a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v2z"></path>
          </svg>
          <span class="text-lg font-medium text-yellow-800 dark:text-yellow-200 group-hover:text-yellow-900 dark:group-hover:text-yellow-100 relative z-10">Contact Us</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-indigo-300 dark:hover:border-indigo-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-indigo-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-indigo-600 dark:text-indigo-400 group-hover:text-indigo-800 dark:group-hover:text-indigo-200 relative z-10" 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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="text-lg font-medium text-indigo-800 dark:text-indigo-200 group-hover:text-indigo-900 dark:group-hover:text-indigo-100 relative z-10">About Us</span>
        </a>
      </li>
    </ul>

    <!-- Decorative elements mimicking torn paper edge -->
    <div class="absolute bottom-0 left-0 w-full h-8 bg-gradient-to-t from-pink-200/50 to-transparent dark:from-zinc-800/50 dark:to-transparent pointer-events-none 
                before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-stripes-gradient before:bg-[length:16px_16px] before:-skew-y-1 
                after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-4 after:bg-pink-100 dark:after:bg-zinc-700"></div>

    <!-- Sticky Note Section -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-48 p-4 bg-yellow-200 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 rounded-lg shadow-lg rotate-3 hover:rotate-0 transition-transform duration-300 
                border-2 border-yellow-300 dark:border-yellow-600 
                flex flex-col items-center justify-center text-center mt-8">
      <p class="text-sm font-semibold mb-2">Important Notice!</p>
      <p class="text-xs">Upcoming policy changes effective Jan 1, 2024. Stay informed!</p>
      <div class="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 bg-red-400 dark:bg-red-600 rounded-full shadow-md border-2 border-red-500 dark:border-red-700 transform rotate-12"></div>
    </div>

  </nav>
</div>


<style>
/* Define the custom stripes gradient for torn paper effect */
.bg-stripes-gradient {
  background-image: linear-gradient(135deg, 
    var(--tw-gradient-stops, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(255, 255, 255, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.1) 50%, 
      rgba(255, 255, 255, 0.1) 75%, 
      transparent 75%, 
      transparent 100%
    )
  );
  background-size: 16px 16px;
}

/* Dark mode adjustments for stripes */
.dark .bg-stripes-gradient {
  background-image: linear-gradient(135deg, 
    var(--tw-gradient-stops, 
      rgba(0, 0, 0, 0.1) 0%, 
      rgba(0, 0, 0, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(0, 0, 0, 0.1) 50%, 
      rgba(0, 0, 0, 0.1) 75%, 
      transparent 75%, 
      transparent 100%
    )
  );
}
</style>

1 ... 23 24 25 26 27 ... 307

Categorías

Todos los componentes