認証コンポーネント

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <div class="h-48 w-full md:w-48 bg-gradient-to-br from-gray-400 to-gray-600 dark:from-gray-700 dark:to-gray-900 flex items-center justify-center">
          <svg class="h-24 w-24 text-gray-200 dark:text-gray-600" 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>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Authentication</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Simple Authentication Form</a>
        <p class="mt-2 text-gray-500 dark:text-gray-400">A simple authentication form with a minimalist 3D-like design.</p>
        <div class="mt-4">
          <input type="text" placeholder="Username" class="mt-1 block w-full rounded-md bg-gray-100 dark:bg-gray-700 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 dark:focus:bg-gray-800 dark:text-white">
          <input type="password" placeholder="Password" class="mt-4 block w-full rounded-md bg-gray-100 dark:bg-gray-700 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 dark:focus:bg-gray-800 dark:text-white">
        </div>
        <div class="mt-6">
          <button class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600">Sign In</button>
        </div>
      </div>
    </div>
  </div>
</div>