Form Elements

<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
    Email Address
</label>
<input type="email" id="email"
       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
       placeholder="Enter your email">
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">We'll never share your email with anyone else.</p>

<label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
    Description
</label>
<textarea id="description" rows="4"
          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-vertical"
          placeholder="Enter a description..."></textarea>

<label for="priority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
    Priority Level
</label>
<select id="priority"
        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
    <option value="">Choose priority...</option>
    <option value="low">Low</option>
    <option value="medium">Medium</option>
    <option value="high">High</option>
    <option value="urgent">Urgent</option>
</select>

<div class="flex items-center">
    <input id="notifications" type="checkbox"
           class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800">
    <label for="notifications" class="ml-2 block text-sm text-gray-900 dark:text-white">
        Send email notifications
    </label>
</div>

<fieldset>
    <legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
        Project Status
    </legend>
    <div class="space-y-3">
        <div class="flex items-center">
            <input id="status-active" name="status" type="radio" value="active" checked
                   class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800">
            <label for="status-active" class="ml-2 block text-sm text-gray-900 dark:text-white">
                Active
            </label>
        </div>
        <!-- More radio options... -->
    </div>
</fieldset>

<label for="file-upload" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
    Upload Document
</label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-md hover:border-primary-400 transition-colors">
    <div class="space-y-1 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <div class="flex text-sm text-gray-600 dark:text-gray-400">
            <label for="file-upload" class="relative cursor-pointer bg-white dark:bg-gray-800 rounded-md font-medium text-primary-600 hover:text-primary-500">
                <span>Upload a file</span>
                <input id="file-upload" name="file-upload" type="file" class="sr-only">
            </label>
            <p class="pl-1">or drag and drop</p>
        </div>
        <p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, PDF up to 10MB</p>
    </div>
</div>

<!-- Success State -->
<input type="text" value="john@example.com"
       class="w-full px-3 py-2 border border-green-300 dark:border-green-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
<p class="mt-1 text-sm text-green-600 dark:text-green-400">Email is valid.</p>

<!-- Error State -->
<input type="text" value="invalid-email"
       class="w-full px-3 py-2 border border-red-300 dark:border-red-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500">
<p class="mt-1 text-sm text-red-600 dark:text-red-400">Please enter a valid email address.</p>

<!-- Disabled State -->
<input type="text" value="Cannot edit this field" disabled
       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed">