Dark Form

<div class="bg-gray-950 p-8 rounded-2xl max-w-sm mx-auto shadow-2xl">
  <h2 class="text-2xl font-bold text-white mb-1">Welcome back</h2>
  <p class="text-gray-500 text-sm mb-6">Sign in to your account</p>
  <form class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-400 mb-1">Email</label>
      <input type="email" class="w-full px-4 py-2.5 bg-gray-900 border border-gray-800 rounded-lg text-white text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 placeholder-gray-600" placeholder="you@example.com" />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-400 mb-1">Password</label>
      <input type="password" class="w-full px-4 py-2.5 bg-gray-900 border border-gray-800 rounded-lg text-white text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 placeholder-gray-600" placeholder="••••••••" />
    </div>
    <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-violet-600 text-white font-semibold rounded-lg hover:shadow-lg hover:shadow-indigo-500/25 transition-all">Sign In</button>
  </form>
</div>