Skeuomorphismus-Anmeldeformular Graustufen

<div class="flex items-center justify-center min-h-screen bg-gray-lighter դark:bg-gray-darker">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-skeuo-light dark:bg-gray-true dark:shadow-skeuo-dark">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-gray-100">Register</h2>
    <form class="space-y-4">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
        <input type="text" id="username" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <button type="submit" class="w-full px-4 py-2 text-white bg-black rounded-md shadow-skeuo-button hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-light dark:text-gray-900 dark:hover:bg-gray dark:focus:ring-gray-darker">Register</button>
    </form>
  </div>
</div>

<style>
.shadow-skeuo-light {
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

.shadow-skeuo-dark {
  box-shadow: 10px 10px 20px #2c2c2c, -10px -10px 20px #444444;
}

.shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}

.dark .shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #2c2c2c, inset -5px -5px 10px #444444;
}

.shadow-skeuo-button {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

.dark .shadow-skeuo-button {
    box-shadow: 5px 5px 10px #2c2c2c, -5px -5px 10px #444444;
}

.bg-gray-lighter {
    background-color: #f3f3f3;
}

.dark\:bg-gray-darker {
    background-color: #333333;
}

.bg-gray-true {
    background-color: #cccccc;
}

.dark\:bg-gray-true {
    background-color: #333333;
}

.dark\:text-gray-100 {
    color: #eeeeee;
}

.dark\:text-gray-300 {
    color: #cccccc;
}

.dark\:bg-gray-darkest {
    background-color: #1a1a1a;
}

.dark\:border-gray-700 {
    border-color: #4d4d4d;
}

.dark\:bg-gray-light {
    background-color: #cccccc;
}

.dark\:text-gray-900 {
    color: #1a1a1a;
}

.dark\:hover\:bg-gray {
    background-color: #808080;
}

.dark\:focus\:ring-gray-darker {
    --tw-ring-color: #333333;
}

</style>