Myna UI

Inputs

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="basic" class="text-xs font-medium text-gray-500"> Your Name </label>
  <input
    id="basic"
    type="text"
    placeholder="Enter your name"
    class="block w-full rounded-md border-gray-200 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="disabled" class="text-xs font-medium text-gray-500"> Your Name </label>
  <input
    disabled
    id="disabled"
    type="text"
    placeholder="Enter your name"
    class="block w-full rounded-md border-gray-200 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="error" class="text-xs font-medium text-gray-500"> Email Address </label>
  <input
    id="error"
    type="email"
    placeholder="Enter your email"
    value="mail@hey.com"
    class="block w-full rounded-md border-red-600 text-sm ring-1 ring-red-600 transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <p class="pt-1 text-xs font-medium text-red-600">Your email doesn't match our records.</p>
</div>

Your email doesn't match our records.

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="icon-prefix" class="text-xs font-medium text-gray-500"> Your Email </label>
  <div class="relative">
    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5">
      <svg class="h-5 w-5 fill-transparent stroke-gray-400" viewBox="0 0 256 256">
        <circle cx="128" cy="128" r="40" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></circle>
        <path
          d="M181.1,208A96,96,0,1,1,224,128c0,22.1-8,40-28,40s-28-17.9-28-40V88"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></path>
      </svg>
    </div>
    <input
      id="icon-prefix"
      type="email"
      placeholder="Enter your email"
      class="block w-full rounded-md border-gray-200 pl-9 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  </div>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="icon-suffix" class="text-xs font-medium text-gray-500"> Your Email </label>
  <div class="relative">
    <input
      id="icon-suffix"
      type="email"
      placeholder="Enter your email"
      class="block w-full rounded-md border-gray-200 pr-9 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5">
      <svg class="h-5 w-5 fill-transparent stroke-gray-400" viewBox="0 0 256 256">
        <circle cx="128" cy="128" r="40" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></circle>
        <path
          d="M181.1,208A96,96,0,1,1,224,128c0,22.1-8,40-28,40s-28-17.9-28-40V88"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></path>
      </svg>
    </div>
  </div>
</div>