Myna UI

Input Groups

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="flex w-full space-x-2">
  <input
    id="name"
    type="text"
    placeholder="Enter your name"
    class="block w-full rounded 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" />
  <button
    type="submit"
    class="inline-flex w-auto shrink-0 cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    Sign up
  </button>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative z-0 flex w-full -space-x-px">
  <label for="basic" class="sr-only">Your Name</label>
  <input
    id="basic"
    type="text"
    placeholder="Enter your name"
    class="block w-full rounded-l border-gray-200 text-sm transition focus:z-10 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <button
    type="submit"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded-r border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    Save
  </button>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative z-0 flex w-full -space-x-px">
  <label for="copy" class="sr-only">Your Name</label>
  <input
    id="copy"
    type="text"
    value="git@github.com:praveenjuge/myna.git"
    readonly
    class="block w-full select-all rounded-l border-gray-200 text-sm transition focus:z-10 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded-r border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 stroke-gray-500" viewBox="0 0 256 256">
      <polyline
        points="168 168 216 168 216 40 88 40 88 88"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></polyline>
      <rect
        x="40"
        y="88"
        width="128"
        height="128"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></rect>
    </svg>
  </button>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative z-0 flex w-full -space-x-px">
  <label for="slug" class="sr-only">Enter slug</label>
  <span class="flex items-center rounded-l border border-gray-200 bg-gray-100 px-3 text-xs font-medium text-gray-500">
    Campfire.in/
  </span>
  <input
    id="slug"
    type="text"
    placeholder="Enter slug here"
    class="block w-full rounded-r border-gray-200 text-sm transition focus:z-10 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
Campfire.in/
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative z-0 flex w-full -space-x-px">
  <label for="subdomain" class="sr-only">Enter subdomain</label>
  <input
    id="subdomain"
    type="text"
    placeholder="Enter subdomain here"
    class="block w-full rounded-l border-gray-200 text-sm transition focus:z-10 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <span class="flex items-center rounded-r border border-gray-200 bg-gray-100 px-3 text-xs font-medium text-gray-500">
    .Campfire.in
  </span>
</div>
.Campfire.in