스큐어모픽 로그인 양식

<div class="min-h-screen flex items-center justify-center p-4 dark:bg-gray-900 bg-gray-100">
  <div class="max-w-sm w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your username">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-light dark:shadow-neumorphic-dark dark:bg-blue-700 dark:hover:bg-blue-800">
          Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

<style>
/* Basic neumorphic effect styles */
/* Light mode shadows */
.shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
}

.shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}

/* Dark mode shadows */
.dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #1c2027, -8px -8px 15px #2e3643;
}

.dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1c2027, inset -5px -5px 10px #2e3643;
}

/* Triadic color examples (adjust as needed) */
/* Using shades of blue, yellow/orange, and red/pink for a triadic feel */
.bg-blue-600 { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.text-blue-600 { color: #2563eb; }
.hover\:text-blue-800:hover { color: #1e40af; }

.dark .bg-blue-700 { background-color: #1d4ed8; }
.dark .hover\:bg-blue-800:hover { background-color: #1e40af; }
.dark .text-blue-400 { color: #60a5fa; }
.dark .hover\:text-blue-500:hover { color: #3b82f6; }

/* Add subtle background colors for light/dark mode that aren't pure white/black to enhance neumorphism */
.bg-gray-100 { background-color: #f0f2f5; }
.dark .bg-gray-900 { background-color: #272c35; }
.bg-gray-200 { background-color: #e5e7eb; }
.dark .bg-gray-700 { background-color: #374151; }
.bg-white { background-color: #ffffff; }
.dark .bg-gray-800 { background-color: #1f2937; }

.text-gray-700 { color: #374151; }
.dark .text-gray-300 { color: #d1d5db; }
.text-gray-800 { color: #1f2937; }
.dark .text-white { color: #ffffff; }
.text-gray-200 { color: #e5e7eb; }

</style>