Label Basic

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-4">
    <div class="space-y-2">
      <label for="username" class="block text-sm font-medium text-gray-700">
        Username
      </label>
      <input
        type="text"
        id="username"
        placeholder="Enter your username"
        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
    </div>

    <div class="space-y-2">
      <label for="email" class="block text-sm font-medium text-gray-700">
        Email Address
      </label>
      <input
        type="email"
        id="email"
        placeholder="Enter your email"
        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
    </div>

    <div class="space-y-2">
      <label for="password" class="block text-sm font-medium text-gray-700">
        Password
      </label>
      <input
        type="password"
        id="password"
        placeholder="Enter your password"
        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
      <p class="mt-1 text-xs text-gray-500">
        Password must be at least 8 characters long
      </p>
    </div>
  </div>
</section>