223 lines
8.8 KiB
HTML
223 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>@tailwindcss/forms Kitchen Sink</title>
|
|
<link rel="stylesheet" href="/dist/tailwind.css" />
|
|
</head>
|
|
<body>
|
|
<div class="antialiased text-gray-900 px-6">
|
|
<div class="max-w-xl mx-auto py-12 md:max-w-4xl">
|
|
<h2 class="text-2xl font-bold">Reset styles</h2>
|
|
<p class="mt-2 text-lg text-gray-500">
|
|
These are form elements this plugin styles by default.
|
|
</p>
|
|
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (text)</span>
|
|
<input
|
|
type="text"
|
|
class="form-input mt-1 block w-full"
|
|
placeholder="john@example.com"
|
|
/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (email)</span>
|
|
<input
|
|
type="email"
|
|
class="form-input mt-1 block w-full"
|
|
placeholder="john@example.com"
|
|
/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (email, multiple)</span>
|
|
<input
|
|
type="email"
|
|
multiple
|
|
class="form-input mt-1 block w-full"
|
|
placeholder="john@example.com"
|
|
/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (password)</span>
|
|
<input
|
|
type="password"
|
|
class="form-input mt-1 block w-full"
|
|
placeholder="john@example.com"
|
|
/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (date)</span>
|
|
<input type="date" class="form-input mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (datetime-local)</span>
|
|
<input type="datetime-local" class="form-input mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (month)</span>
|
|
<input type="month" class="form-input mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (number)</span>
|
|
<input type="number" class="form-input mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (search)</span>
|
|
<input type="search" class="form-input mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (time)</span>
|
|
<input type="time" class="form-input mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (week)</span>
|
|
<input type="week" class="form-input mt-1 block w-full" />
|
|
</label>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (tel)</span>
|
|
<input
|
|
type="tel"
|
|
multiple
|
|
class="form-input mt-1 block w-full"
|
|
placeholder="john@example.com"
|
|
/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (url)</span>
|
|
<input
|
|
type="url"
|
|
multiple
|
|
class="form-input mt-1 block w-full"
|
|
placeholder="john@example.com"
|
|
/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Select</span>
|
|
<select class="form-select block w-full mt-1">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Select (single, with size)</span>
|
|
<select class="form-select block w-full mt-1" size="3">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
<option>Option 4</option>
|
|
<option>Option 5</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Select (multiple)</span>
|
|
<select class="form-multiselect block w-full mt-1" multiple>
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
<option>Option 4</option>
|
|
<option>Option 5</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Select (multiple, with size)</span>
|
|
<select class="form-multiselect block w-full mt-1" multiple size="3">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
<option>Option 4</option>
|
|
<option>Option 5</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Textarea</span>
|
|
<textarea
|
|
class="form-textarea mt-1 block w-full h-24"
|
|
rows="3"
|
|
placeholder="Enter some long form content."
|
|
></textarea>
|
|
</label>
|
|
<fieldset class="block">
|
|
<legend class="text-gray-700">Checkboxes</legend>
|
|
<div class="mt-2">
|
|
<div>
|
|
<label class="inline-flex items-center">
|
|
<input class="form-checkbox" type="checkbox" checked />
|
|
<span class="ml-2">Option 1</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="inline-flex items-center">
|
|
<input class="form-checkbox" type="checkbox" />
|
|
<span class="ml-2">Option 2</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="inline-flex items-center">
|
|
<input class="form-checkbox" type="checkbox" />
|
|
<span class="ml-2">Option 3</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset class="block">
|
|
<legend class="text-gray-700">Radio Buttons</legend>
|
|
<div class="mt-2">
|
|
<div>
|
|
<label class="inline-flex items-center">
|
|
<input class="form-radio" type="radio" checked name="radio-direct" value="1" />
|
|
<span class="ml-2">Option 1</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="inline-flex items-center">
|
|
<input class="form-radio" type="radio" name="radio-direct" value="2" />
|
|
<span class="ml-2">Option 2</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="inline-flex items-center">
|
|
<input class="form-radio" type="radio" name="radio-direct" value="3" />
|
|
<span class="ml-2">Option 3</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-4xl mx-auto py-12">
|
|
<h2 class="text-2xl font-bold">Untouched</h2>
|
|
<p class="mt-2 text-lg text-gray-500">
|
|
These are form elements we don't handle (yet?), but we use this to make sure we haven't
|
|
accidentally styled them by mistake.
|
|
</p>
|
|
<div class="mt-8 grid grid-cols-2 gap-6 items-start">
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (range)</span>
|
|
<input type="range" class="mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (color)</span>
|
|
<input type="color" class="mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (file)</span>
|
|
<input type="file" class="mt-1 block w-full" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-700">Input (file, multiple)</span>
|
|
<input type="file" multiple class="mt-1 block w-full" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|