Componentes de búsqueda

Categorías

Componentes Formulario de inscripción

Formulario de inscripción

Formulario de creación de nuevas cuentas de usuario

Componente del formulario de registro

Un componente de formulario de registro receptivo y visualmente atractivo diseñado para CRM/Business Tools, con un esquema de color triádico y microinteracciones sutiles, con soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-slate-900 dark:via-gray-950 dark:to-zinc-950 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] dark:shadow-xl dark:shadow-blue-900/20">
    <div class="px-6 py-8 sm:px-8 sm:py-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">
        Join Our Community
      </h2>
      <p class="text-center text-sm text-gray-600 dark:text-gray-400 mb-8">
        Create your account to unlock powerful CRM tools.
      </p>

      <form class="space-y-6">
        <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" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-blue-400 dark:hover:border-blue-600 focus:shadow-md">
        </div>

        <div>
          <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email-address" name="email" placeholder="[email protected]" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-pink-400 dark:hover:border-pink-600 focus:shadow-md">
        </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="At least 8 characters" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-purple-400 dark:hover:border-purple-600 focus:shadow-md">
        </div>

        <div class="relative flex items-start">
          <div class="flex items-center h-5">
            <input id="terms" name="terms" type="checkbox" required
              class="focus:ring-blue-500 h-4 w-4 text-blue-600 dark:text-blue-500 border-gray-300 dark:border-gray-600 rounded transform transition-all duration-200 ease-in-out
                     dark:bg-gray-700 dark:checked:bg-blue-600 dark:checked:border-blue-600 opacity-90 hover:opacity-100
                     focus:scale-110">
          </div>
          <div class="ml-3 text-sm">
            <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Privacy Policy</a>.
            </label>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-semibold text-white
                   bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 
                   hover:from-purple-700 hover:via-pink-700 hover:to-blue-700 
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800
                   transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95
                   relative overflow-hidden group">
            <span class="relative z-10">Register</span>
            <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="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-500 dark:hover:text-blue-400 ml-1 underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">
            Sign In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

Componente del formulario de registro

Un componente de formulario de registro receptivo con un diseño esqueuomórfico, combinación de colores apagados y compatibilidad con modo oscuro, adecuado para sitios web de viajes y turismo. Imita elementos del mundo real como botones en relieve y campos de entrada empotrados.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 font-sans">
  <div class="w-full max-w-lg bg-gray-100 dark:bg-gray-700 rounded-3xl shadow-xl p-8 transform transition-all duration-300 ease-in-out
              dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_inset_0_-2px_4px_rgba(255,255,255,0.05),_0_8px_16px_rgba(0,0,0,0.5)]
              shadow-[inset_0_2px_4px_rgba(255,255,255,0.8),_inset_0_-2px_4px_rgba(0,0,0,0.1),_0_8px_16px_rgba(0,0,0,0.2)]">
    <h2 class="text-3xl font-extrabold text-gray-700 dark:text-gray-200 mb-8 text-center drop-shadow-sm">
      <span class="block">Embark on Your Journey</span>
      <span class="block text-sm font-normal text-gray-500 dark:text-gray-400 mt-2">Register for an unforgettable experience</span>
    </h2>

    <form class="space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Full Name</label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Full Name">
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Email Address">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Password</label>
        <input type="password" id="password" name="password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Password">
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Confirm Password">
      </div>

      <div class="relative flex items-start">
        <div class="flex items-center h-5">
          <input id="terms" name="terms" type="checkbox"
                 class="focus:ring-blue-500 h-5 w-5 text-blue-600 rounded drop-shadow-sm
                        bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-600
                        shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_inset_0_-1px_2px_rgba(255,255,255,0.6)]
                        dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.7),_inset_0_-1px_2px_rgba(255,255,255,0.05)]
                        appearance-none checked:bg-blue-500 checked:border-transparent cursor-pointer
                        transition-all duration-200 ease-in-out">
          <div class="absolute w-5 h-5 flex items-center justify-center pointer-events-none">
            <svg class="h-4 w-4 text-white opacity-0 transform scale-0 transition-all duration-200 ease-in-out pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
        </div>
        <div class="ml-3 text-sm">
          <label for="terms" class="font-medium text-gray-700 dark:text-gray-300 drop-shadow-sm">
            I agree to the <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md transition duration-200">Terms and Conditions</a>
          </label>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-6 border border-transparent rounded-2xl text-lg font-bold text-white
                       bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400
                       shadow-xl
                       shadow-[0_4px_8px_rgba(0,0,0,0.2),_inset_0px_2px_4px_rgba(255,255,255,0.4),_inset_0px_-2px_4px_rgba(0,0,0,0.2)]
                       dark:shadow-[0_4px_8px_rgba(0,0,0,0.6),_inset_0px_2px_4px_rgba(255,255,255,0.1),_inset_0px_-2px_4px_rgba(0,0,0,0.4)]
                       active:shadow-inner active:bg-blue-700 dark:active:bg-blue-800
                       transform active:scale-98 transition-all duration-200 ease-in-out drop-shadow-sm">
          Register Now
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  /* Custom style for the checkbox checkmark animation */
  input[type='checkbox']:checked + div > svg {
    opacity: 1;
    transform: scale(1);
  }
</style>

Componente del formulario de registro

Un componente de formulario de registro receptivo con una estética de diseño 3D, que incorpora tonos sepia/marrón, adecuado para aplicaciones de redes sociales. Es compatible con el modo oscuro y utiliza HTML semántico para la accesibilidad.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-stone-200 via-stone-100 to-stone-200 dark:from-stone-900 dark:via-stone-950 dark:to-stone-900 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center font-sans">
  <div class="max-w-md w-full relative group perspective-1000">
    <!-- Front of the 3D card -->
    <div class="transform-style-preserve-3d transition-transform duration-700 ease-in-out group-hover:rotate-y-180 backface-hidden rounded-2xl shadow-xl border border-stone-300 dark:border-stone-700 p-8 space-y-8 bg-gradient-to-br from-stone-50 via-stone-100 to-stone-50 dark:from-stone-800 dark:via-stone-900 dark:to-stone-800">
      <div class="text-center">
        <h2 class="mt-6 text-3xl font-extrabold text-stone-800 dark:text-stone-100 drop-shadow-sm">
          Join Our Social Network
        </h2>
        <p class="mt-2 text-sm text-stone-600 dark:text-stone-400">
          Create your profile and connect with friends!
        </p>
      </div>
      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="username" class="sr-only">Username</label>
            <input id="username" name="username" type="text" autocomplete="username" required
              class="appearance-none rounded-t-md relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Username">
          </div>
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required
              class="appearance-none rounded-none relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="new-password" required
              class="appearance-none rounded-b-md relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Password">
          </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-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded bg-stone-200 dark:bg-stone-800 transform translate-z-10">
            <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transform translate-z-10">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit"
            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-900 shadow-lg shadow-amber-500/30 dark:shadow-amber-700/30 transition duration-300 ease-in-out transform translate-z-10 hover:translate-z-20 hover:scale-105 active:scale-95 active:translate-z-5">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <!-- Heroicon name: solid/lock-closed -->
              <svg class="h-5 w-5 text-amber-300 group-hover:text-amber-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign Up
          </button>
        </div>
      </form>
    </div>

    <!-- Back of the 3D card -->
    <div class="transform-style-preserve-3d transition-transform duration-700 ease-in-out rotate-y-180 backface-hidden absolute inset-0 rounded-2xl shadow-xl border border-stone-300 dark:border-stone-700 p-8 space-y-8 bg-gradient-to-bl from-stone-50 via-stone-100 to-stone-50 dark:from-stone-800 dark:via-stone-900 dark:to-stone-800">
      <div class="text-center">
        <h2 class="mt-6 text-3xl font-extrabold text-stone-800 dark:text-stone-100 drop-shadow-sm">
          Welcome Back!
        </h2>
        <p class="mt-2 text-sm text-stone-600 dark:text-stone-400">
          Already have an account? Sign in here.
        </p>
      </div>
      <div class="flex flex-col items-center justify-center space-y-4">
        <img class="h-24 w-24 rounded-full border-4 border-amber-500 shadow-md" src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar">
        <p class="text-lg font-semibold text-stone-800 dark:text-stone-100">John Doe</p>
        <button type="button"
          class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-lime-600 to-lime-700 hover:from-lime-700 hover:to-lime-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-stone-900 shadow-lg shadow-lime-500/30 dark:shadow-lime-700/30 transition duration-300 ease-in-out transform translate-z-10 hover:translate-z-20 hover:scale-105 active:scale-95 active:translate-z-5">
          Go to Profile
        </button>
        <p class="text-sm text-stone-600 dark:text-stone-400 mt-4">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Or log in with another account</a>
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is necessary for the 3D effect */
  .perspective-1000 {
    perspective: 1000px;
  }

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

  .backface-hidden {
    backface-visibility: hidden;
  }

  .translate-z-10 {
    transform: translateZ(10px);
  }

  .translate-z-20 {
    transform: translateZ(20px);
  }

  .translate-z-5 {
    transform: translateZ(5px);
  }

  /* Custom styles for the 3D rotation */
  @media (hover: hover) {
    .group:hover .transform-style-preserve-3d:first-child {
      transform: rotateY(180deg);
    }
    .group:hover .transform-style-preserve-3d:last-child {
      transform: rotateY(360deg);
    }
  }

  /* Fallback for touch devices or if hover is not available */
  /* You might replace `group:hover` with a JavaScript-triggered class toggle in a real app */
  .group-hover\:rotate-y-180 {
    transform: rotateY(180deg);
  }
  .group-hover\:rotate-y-360 {
    transform: rotateY(360deg);
  }
</style>

Retro_Charity_Registration_Form

Un componente de formulario de registro simple y receptivo con una estética retro / vintage de los años 80 / 90 sepia / marrón, diseñado para fines sin fines de lucro / caridad, incluido el soporte del modo oscuro.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-amber-100 dark:bg-stone-900 font-mono text-stone-800 dark:text-stone-200">
  <div class="w-full max-w-md p-6 sm:p-8 space-y-6 bg-amber-50 dark:bg-stone-800 rounded-lg shadow-xl border-2 border-stone-400 dark:border-stone-600 transform transition-all duration-300 hover:scale-[1.01]">
    <div class="text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-amber-900 dark:text-amber-300 mb-2 transform transition-all duration-300 hover:text-amber-700 dark:hover:text-amber-100 drop-shadow-md">
        Join The Cause!
      </h2>
      <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">
        Help us make a difference. Sign up to receive updates and news.
      </p>
    </div>

    <form class="space-y-4">
      <div>
        <label for="full-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Full Name
        </label>
        <input type="text" id="full-name" name="full-name" autocomplete="name"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="Your Name Here">
      </div>

      <div>
        <label for="email-address" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Email Address
        </label>
        <input type="email" id="email-address" name="email" autocomplete="email"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="[email protected]">
      </div>

      <div>
        <label for="comments" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Comments (Optional)
        </label>
        <textarea id="comments" name="comments" rows="3"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="Anything you'd like to share?"></textarea>
      </div>

      <div class="flex items-center">
        <input id="terms-and-privacy" name="terms-and-privacy" type="checkbox"
          class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-600 rounded bg-amber-200 dark:bg-stone-700 transition-colors duration-200">
        <label for="terms-and-privacy" class="ml-2 block text-sm text-stone-700 dark:text-stone-300">
          I agree to the <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline">Terms</a> and
          <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline">Privacy Policy</a>.
        </label>
      </div>

      <div>
        <button type="submit"
          class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-lg font-medium rounded-md text-white bg-amber-600 hover:bg-amber-700 dark:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 transition-all duration-300 shadow-lg transform hover:scale-[1.02] active:scale-[0.98]">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <!-- Heroicon name: solid/heart -->
            <svg class="h-5 w-5 text-amber-200 group-hover:text-amber-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
            </svg>
          </span>
          Count Me In!
        </button>
      </div>
    </form>
  </div>
</div>

RetroRegistrationForm

Un componente de formulario de registro retro/vintage con tonos tierra, diseño responsivo y soporte de temas oscuros, adecuado para un blog o sitio de contenido.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-6">
  <div class="bg-amber-100 dark:bg-amber-900 p-8 rounded-lg shadow-lg max-w-md w-full border-4 border-amber-800 dark:border-amber-700 transform rotate-2 animate-tilt-2">
    <h2 class="text-3xl font-bold text-amber-900 dark:text-amber-100 mb-6 text-center font-mono tracking-wider">Join Our Community</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Username:</label>
        <input type="text" id="username" name="username" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Choose a username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Email:</label>
        <input type="email" id="email" name="email" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Password:</label>
        <input type="password" id="password" name="password" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Create a password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-amber-700 hover:bg-amber-900 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-amber-900 dark:border-amber-500 font-mono transform -rotate-3 hover:rotate-0 transition-transform duration-200">Register Now</button>
        <a class="inline-block align-baseline font-bold text-sm text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 font-mono" href="#">
          Already have an account?
        </a>
      </div>
    </form>
  </div>
</div>

<style>
  @keyframes tilt-2 {
    0% { transform: rotate(2deg); }
    50% { transform: rotate(-1deg); }
    100% { transform: rotate(2deg); }
  }

  .animate-tilt-2 {
    animation: tilt-2 4s infinite ease-in-out;
  }
</style>

Componente del formulario de registro

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

Abrir Vista previa

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

Componente del formulario de registro

Un componente de formulario de registro interactivo con un estilo de glassmorphism, combinación de colores en tonos tierra y compatibilidad con temas oscuros. Diseñado para plataformas de redes sociales, con un diseño simple y elementos mínimos. Utiliza Tailwind CSS para aplicar estilo e incluye marcadores de posición de imagen de ejemplo.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative p-8 rounded-lg shadow-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-stone-300 to-stone-500 opacity-30 dark:from-stone-700 dark:to-stone-900"></div>
    
    <h2 class="text-3xl font-bold text-center text-stone-800 dark:text-stone-100 mb-6">Register</h2>
    
    <form>
      <div class="mb-4">
        <label for="username" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-6">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <button type="submit" class="w-full bg-stone-600 dark:bg-stone-700 text-white p-3 rounded-lg font-semibold hover:bg-stone-700 dark:hover:bg-stone-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
        Register
      </button>
    </form>
    
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      Already have an account? <a href="#" class="text-stone-800 dark:text-stone-200 font-semibold hover:underline">Login here</a>
    </p>
  </div>
</div>

Formulario de registro de esqueuomorfismo en escala de grises

Un componente de formulario de registro esqueuomórfico en escala de grises para portafolios, con complejidad moderada, diseño receptivo y soporte de tema oscuro, sin Javascript. Imágenes de picsum.photos y randomuser.me utilizadas.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-lighter դark:bg-gray-darker">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-skeuo-light dark:bg-gray-true dark:shadow-skeuo-dark">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-gray-100">Register</h2>
    <form class="space-y-4">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
        <input type="text" id="username" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <button type="submit" class="w-full px-4 py-2 text-white bg-black rounded-md shadow-skeuo-button hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-light dark:text-gray-900 dark:hover:bg-gray dark:focus:ring-gray-darker">Register</button>
    </form>
  </div>
</div>

<style>
.shadow-skeuo-light {
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

.shadow-skeuo-dark {
  box-shadow: 10px 10px 20px #2c2c2c, -10px -10px 20px #444444;
}

.shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}

.dark .shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #2c2c2c, inset -5px -5px 10px #444444;
}

.shadow-skeuo-button {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

.dark .shadow-skeuo-button {
    box-shadow: 5px 5px 10px #2c2c2c, -5px -5px 10px #444444;
}

.bg-gray-lighter {
    background-color: #f3f3f3;
}

.dark\:bg-gray-darker {
    background-color: #333333;
}

.bg-gray-true {
    background-color: #cccccc;
}

.dark\:bg-gray-true {
    background-color: #333333;
}

.dark\:text-gray-100 {
    color: #eeeeee;
}

.dark\:text-gray-300 {
    color: #cccccc;
}

.dark\:bg-gray-darkest {
    background-color: #1a1a1a;
}

.dark\:border-gray-700 {
    border-color: #4d4d4d;
}

.dark\:bg-gray-light {
    background-color: #cccccc;
}

.dark\:text-gray-900 {
    color: #1a1a1a;
}

.dark\:hover\:bg-gray {
    background-color: #808080;
}

.dark\:focus\:ring-gray-darker {
    --tw-ring-color: #333333;
}

</style>

registro-formulario-ecommerce-viento de cola

Componente de formulario de registro de diseño plano minimalista para comercio electrónico que utiliza Tailwind CSS con soporte de modo responsivo y oscuro, con un esquema de color azul-naranja complementario.

Abrir Vista previa

                <!-- Registration Form Component -->
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-100 dark:bg-gray-800">
  <div class="w-full max-w-md bg-white dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Create Your Account</h2>
      <form action="#" method="POST" class="space-y-4">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
          <input type="text" id="full-name" name="fullname" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <input type="email" id="email" name="email" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <input type="password" id="password" name="password" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
          <input type="password" id="confirm-password" name="confirmPassword" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <button type="submit" class="w-full py-2 px-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-500">
          Register
        </button>
      </form>
      <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500 font-medium">Log in</a>
      </p>
    </div>
  </div>
</div>

Componente del formulario de registro

Un componente de formulario de registro receptivo diseñado en un estilo brutalista con un esquema de color pastel y adecuado para sitios web comerciales / corporativos. Cuenta con soporte para el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="text" id="name" placeholder="Your Name" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="email" id="email" placeholder="Your Email" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="password" id="password" placeholder="Create a Password" required />
            </div>
            <button class="w-full bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 rounded" type="submit">Register</button>
        </form>
        <div class="mt-4 text-center">
            <img class="mx-auto rounded-full w-12 h-12 mb-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <p class="text-sm text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-pink-500 hover:text-pink-600 dark:text-pink-400">Login</a></p>
        </div>
    </div>
</div>