Retro_Charity_Registration_Form

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