Input Basic

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Basic Input -->
    <div class="space-y-2">
      <label for="basic-input" class="block text-sm font-medium text-gray-700">Email Address</label>
      <input type="email" id="basic-input" placeholder="[email protected]" 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
      <p class="text-sm text-gray-500">Enter your email address</p>
    </div>

    <!-- Password Input -->
    <div class="space-y-2">
      <label for="password-input" class="block text-sm font-medium text-gray-700">Password</label>
      <input type="password" id="password-input" placeholder="••••••••" 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
      <p class="text-sm text-gray-500">At least 8 characters</p>
    </div>

    <!-- Number Input -->
    <div class="space-y-2">
      <label for="number-input" class="block text-sm font-medium text-gray-700">Quantity</label>
      <input type="number" id="number-input" min="1" max="100" value="1" 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
    </div>

    <!-- Textarea -->
    <div class="space-y-2">
      <label for="textarea-input" class="block text-sm font-medium text-gray-700">Message</label>
      <textarea id="textarea-input" rows="4" placeholder="Type your message here..." 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
    </div>
  </div>
</section>