Packages
moon
2.90.4
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
assets/node_modules/@tailwindcss/forms/kitchen-sink.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 (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">Textarea</span>
<textarea
class="form-textarea mt-1 block w-full h-24"
rows="3"
placeholder="Enter some long form content."
></textarea>
</label>
<div class="block">
<span class="text-gray-700">Checkboxes</span>
<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>
</div>
<div class="block">
<span class="text-gray-700">Radio Buttons</span>
<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>
</div>
</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>