<form>
  <div class="grid max-w-lg p-4 gap-y-4">
    <div>
      <label for="firstname" class="block mb-2 text-sm font-semibold dark:text-gray-100">First Name</label>
      <input type="text" placeholder="John" class="w-full p-2 border border-gray-200 rounded-lg bg-slate-50 dark:bg-gray-300" />
    </div>
    <div>
      <label for="firstname" class="block mb-2 text-sm font-semibold dark:text-gray-100">Surname</label>
      <input type="text" placeholder="Smith" class="w-full p-2 border border-gray-200 rounded-lg bg-slate-50 dark:bg-gray-300" />
    </div>
    <div>
      <label for="firstname" class="block mb-2 text-sm font-semibold dark:text-gray-100">Bio</label>
      <textarea type="text" rows="4" placeholder="About you" class="w-full p-2 border border-gray-200 rounded-lg bg-slate-50 dark:bg-gray-300"></textarea>
    </div>

    <div>
      <button class="right-0 flex px-4 py-2 text-white bg-blue-600 rounded shadow-md hover:bg-blue-500 dark:hover:bg-blue-500 dark:hover:text-gray-100">Save</button>
    </div>
  </div>
</form>

<form>
  <div class="grid max-w-md p-4 gap-y-4">
    <p class="text-xl font-semibold dark:text-gray-100">Sign in to your account</p>
    <div>
      <label for="email" class="block mb-2 text-sm font-semibold dark:text-gray-100">Email</label>
      <input type="text" placeholder="my@email.com" class="w-full p-2 border border-gray-200 rounded-lg bg-slate-50 dark:bg-gray-300" />
    </div>
    <div>
      <div class="flex justify-between">
        <label for="password" class="mb-2 text-sm font-semibold dark:text-gray-100">Password</label>
        <a href="/forgot-password" class="text-sm text-blue-600 dark:text-blue-400">Forgot your password?</a>
      </div>
      <input type="password" placeholder="password" class="w-full p-2 border border-gray-200 rounded-lg bg-slate-50 dark:bg-gray-300" />
    </div>
    <div class="flex items-center py-3">
      <input checked id="remember-me" type="checkbox" value="" class="w-4 h-4 text-blue-500 bg-gray-100 border-gray-300 rounded" />
      <label for="remember-me" class="ml-2 text-sm dark:text-gray-100">Stay signed for a week</label>
    </div>
    <button class="px-4 py-2 text-white bg-blue-600 rounded shadow-md hover:bg-blue-500 dark:hover:bg-blue-500 dark:hover:text-gray-100">Sign up</button>
  </div>
</form>

<form action="#" method="POST">
  <div class="grid max-w-lg p-4 gap-y-4 dark:bg-gray-700">
    <h2 class="text-xl font-semibold dark:text-gray-100">Contact Us</h2>
    <div>
      <label for="name" class="block mb-2 text-sm font-semibold dark:text-gray-100">Name</label>
      <input type="text" name="name" placeholder="your name" class="w-full p-2 border border-gray-200 rounded-lg bg-slate-50 dark:bg-gray-300" />
    </div>
    <div>
      <label for="email" class="block mb-2 text-sm font-semibold dark:text-gray-100">Email</label>
      <input type="text" name="email" placeholder="my@email.com" class="w-full p-2 border border-gray-200 rounded-lg bg-slate-50 dark:bg-gray-300" />
    </div>
    <div>
      <label for="message" class="block mb-2 text-sm font-semibold dark:text-gray-100">Message</label>
      <textarea name="message" placeholder="Your message ..." rows="10" class="w-full p-2 border border-gray-200 rounded-lg bg-slate-50 dark:bg-gray-300" ></textarea>
    </div>
    <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded shadow-md right hover:bg-blue-500 dark:hover:bg-blue-500 dark:hover:text-gray-100">Send message</button>
  </div>
</form>

<div class="max-w-md">
  <textarea class="w-full p-4 text-gray-500 border rounded-lg shadow-sm dark:bg-gray-300" maxlength="3000" rows="10" placeholder="Insert text" name="textarea"></textarea>
</div>

<div class="flex items-center">
<p class="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">Dark Mode</p>
<label for="default-toggle" class="relative inline-flex cursor-pointer">
  <input type="checkbox" value="" id="default-toggle" class="sr-only peer" />
  <div class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-green-800"></div>
</label>
</div>