Tailwind inputs

Responsive inputs built with Tailwind. Get data from the users in password inputs, text areas, email fields, and many more types of data.

Basic inputs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<div class="mb-3 pt-0">
  <input type="text" placeholder="Placeholder"
    class="px-2 py-1 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:ring w-full" />
</div>

<div class="mb-3 pt-0">
  <input type="text" placeholder="Placeholder"
    class="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:ring w-full" />
</div>

<div class="pt-0">
  <input type="text" placeholder="Placeholder"
    class="px-3 py-4 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-base border border-gray-400 outline-none focus:outline-none focus:ring w-full" />
</div>

Inputs with icon on the left

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


  
<!-- Required font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <span
    class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-1">
    <i class="fas fa-lock"></i>
  </span>
  <input type="text" placeholder="Placeholder"
    class="px-2 py-1 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:ring w-full pl-10" />
</div>

<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <span
    class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
    <i class="fas fa-lock"></i>
  </span>
  <input type="text" placeholder="Placeholder"
    class="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:ring w-full pl-10" />
</div>

<div class="relative flex w-full flex-wrap items-stretch">
  <span
    class="z-10 h-full leading-normal font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-lg items-center justify-center w-8 pl-3 py-4">
    <i class="fas fa-lock"></i>
  </span>
  <input type="text" placeholder="Placeholder"
    class="px-3 py-4 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-base border border-gray-400 outline-none focus:outline-none focus:ring w-full pl-10" />
</div>

Inputs with icon on the right

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


  <!-- Required font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
  <div class="relative flex w-full flex-wrap items-stretch mb-3">
    <input type="text" placeholder="Placeholder"
      class="px-2 py-1 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:ring w-full pr-10" />
    <span
      class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-2 py-1">
      <i class="fas fa-user"></i>
    </span>
  </div>
  
  <div class="relative flex w-full flex-wrap items-stretch mb-3">
    <input type="text" placeholder="Placeholder"
      class="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:ring w-full pr-10" />
    <span
      class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-3 py-3">
      <i class="fas fa-user"></i>
    </span>
  </div>
  
  <div class="relative flex w-full flex-wrap items-stretch">
    <input type="text" placeholder="Placeholder"
      class="px-3 py-4 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-base border border-gray-400 outline-none focus:outline-none focus:ring w-full pr-10" />
    <span
      class="z-10 h-full leading-normal font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-lg items-center justify-center w-8 right-0 pr-3 py-4">
      <i class="fas fa-user"></i>
    </span>
  </div>