sbakhtina
/
SQL


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<!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>