オーガニック/自然にインスパイアされたヘルスケアフォーム

<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 sm:p-6 lg:p-8 dark:from-gray-900 dark:to-blue-950 flex items-center justify-center font-sans">
  <div class="max-w-xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden md:flex flex-col relative before:absolute before:inset-x-0 before:-top-16 before:h-32 before:bg-gradient-to-br before:from-blue-100 before:to-indigo-200 before:rounded-t-full before:transform before:scale-x-150 before:dark:from-blue-900 before:dark:to-indigo-950 before:opacity-70 dark:text-gray-200">
    <div class="relative px-6 py-8 sm:px-10 sm:py-12 z-10">
      <h2 class="text-3xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 text-center">
        Patient Registration
      </h2>
      <p class="text-blue-700 dark:text-blue-300 text-center mb-8">
        Please fill out the form below to register.
      </p>
      <form class="space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-blue-800 dark:text-blue-300">
            Full Name
          </label>
          <div class="mt-1">
            <input type="text" id="full-name" name="full-name" placeholder="John Doe" class="appearance-none block w-full px-4 py-3 border border-blue-300 dark:border-blue-700 rounded-xl shadow-sm placeholder-blue-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base transition duration-300 ease-in-out transform hover:scale-[1.01]">
          </div>
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-blue-800 dark:text-blue-300">
            Email Address
          </label>
          <div class="mt-1">
            <input type="email" id="email" name="email" placeholder="[email protected]" class="appearance-none block w-full px-4 py-3 border border-blue-300 dark:border-blue-700 rounded-xl shadow-sm placeholder-blue-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base transition duration-300 ease-in-out transform hover:scale-[1.01]">
          </div>
        </div>

        <div>
          <label for="phone" class="block text-sm font-medium text-blue-800 dark:text-blue-300">
            Phone Number
          </label>
          <div class="mt-1">
            <input type="tel" id="phone" name="phone" placeholder="(123) 456-7890" class="appearance-none block w-full px-4 py-3 border border-blue-300 dark:border-blue-700 rounded-xl shadow-sm placeholder-blue-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base transition duration-300 ease-in-out transform hover:scale-[1.01]">
          </div>
        </div>

        <div class="flex items-center">
          <input id="terms-privacy" name="terms-privacy" type="checkbox" class="h-5 w-5 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-300 border-blue-300 dark:border-blue-700 rounded-md transition duration-300 ease-in-out transform hover:scale-110">
          <label for="terms-privacy" class="ml-3 block text-sm text-blue-800 dark:text-blue-300">
            I agree to the <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 underline">Privacy Policy</a> and <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 underline">Terms of Service</a>.
          </label>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 dark:focus:ring-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-[1.015]">
            Register Patient
          </button>
        </div>
      </form>
    </div>
  </div>
</div>