Tailwind sample form

index.html

<form action="">
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
        Name
      </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Text input">
  </div>
  <div class="mb-4">
    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
        Subject
      </label>
    <div class="relative">
      <select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
        <option>Select dropdown</option>
        <option>With options</option>
        </select>
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
      </div>
    </div>
  </div>
  <div class="mb-4">
    <label class="block">
      <input class="mr-2 leading-tight" type="checkbox">
      <span class="text-sm">
        I agree this
      </span>
    </label>
  </div>
  <div class="mb-4">
    <label class="inline-flex items-center">
      <input type="radio" class="form-radio" name="accountType" value="1">
      <span class="ml-2">Yes</span>
    </label>
    <label class="inline-flex items-center ml-6">
      <input type="radio" class="form-radio" name="accountType" value="2">
      <span class="ml-2">No</span>
    </label>
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2">
  Message
  <textarea class="shadow form-textarea mt-1 block w-full border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows="5" placeholder="Textarea"></textarea>
</label>
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Submit
      </button>
  </div>
</form>

style.css

html, body {
  height: 100%
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 400px;
}

button {
  width: 100%
}

tailwind-sample-form.markdown

Tailwind sample form

A Pen by ryo on CodePen.

License.