Forms

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
  <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Doe">
</div>

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
  <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="[email protected]">
</div>

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
  <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="johndoe">
  <p class="mt-1 text-xs text-gray-500">This will be your public display name.</p>
</div>

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Search</label>
  <div class="relative">
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
      <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>
    <input type="text" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Search...">
  </div>
</div>

<!-- Valid Input -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Valid Input</label>
  <input type="text" class="w-full px-3 py-2 border border-green-300 rounded-md focus:ring-2 focus:ring-green-500 bg-green-50">
  <p class="mt-1 text-xs text-green-600">✓ Email is valid</p>
</div>

<!-- Invalid Input -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Invalid Input</label>
  <input type="text" class="w-full px-3 py-2 border border-red-300 rounded-md focus:ring-2 focus:ring-red-500 bg-red-50">
  <p class="mt-1 text-xs text-red-600">✗ Please enter a valid email</p>
</div>

<!-- Disabled Input -->
<input type="text" disabled class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 text-gray-500 cursor-not-allowed">

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
  <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    <option>United States</option>
    <option>Canada</option>
    <option>United Kingdom</option>
  </select>
</div>

<!-- Checkbox -->
<div class="flex items-center">
  <input type="checkbox" id="design" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
  <label for="design" class="ml-2 text-sm text-gray-700">Design</label>
</div>

<!-- Radio Button -->
<div class="flex items-center">
  <input type="radio" id="pro" name="plan" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
  <label for="pro" class="ml-2 text-sm text-gray-700">Pro - $29/month</label>
</div>

<div class="flex items-center justify-between">
  <span class="text-sm font-medium text-gray-700">Enable notifications</span>
  <label class="relative inline-flex items-center cursor-pointer">
    <input type="checkbox" class="sr-only peer">
    <div class="w-11 h-6 bg-gray-200 peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
  </label>
</div>

<div class="flex items-center justify-center w-full">
  <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
    <div class="flex flex-col items-center justify-center pt-5 pb-6">
      <svg class="w-8 h-8 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
      </svg>
      <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
      <p class="text-xs text-gray-500">PNG, JPG or PDF (MAX. 10MB)</p>
    </div>
    <input type="file" class="hidden">
  </label>
</div>

<form class="max-w-2xl space-y-6">
  <div class="border-b border-gray-200 pb-4">
    <h3 class="text-lg font-medium text-gray-900">Account Information</h3>
    <p class="mt-1 text-sm text-gray-500">Create your account and get started</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
      <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md">
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
      <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md">
    </div>
  </div>

  <div class="flex gap-3 pt-4">
    <button type="button" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-md">Cancel</button>
    <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md">Create Account</button>
  </div>
</form>