Input

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="w-full space-y-0.5">
  <label for="basic" class="text-xs font-medium text-slate-500">Your Name</label>
  <input id="basic" type="text" placeholder="Enter your name" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-slate-300"/>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="w-full space-y-0.5">
  <label for="disabled" class="text-xs font-medium text-slate-500">Your Name</label>
  <input id="disabled" type="text" placeholder="Enter your name" disabled="" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-slate-300"/>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="w-full space-y-0.5">
  <label for="error" class="text-xs font-medium text-slate-500">Your Name</label>
  <input id="error" type="text" placeholder="Enter your name" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-red-600 ring-1 ring-red-600"/>
  <p class="pt-1 text-xs font-medium text-red-600">This field is required</p>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="flex w-full space-x-2">
  <div class="w-full space-y-0.5">
    <input id="input-group-1" type="text" placeholder="Enter your name" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-slate-300"/>
  </div>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md">
    <span>Submit</span>
  </button>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="relative z-0 flex w-full -space-x-px">
  <div class="w-full space-y-0.5">
    <input id="input-group-2" type="text" placeholder="Enter your name" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 rounded-r-none border-slate-300"/>
  </div>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-l-none">
    <span>Submit</span>
  </button>
</div>