Registration Form 구성 요소

<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>