Developer-Friendly Tailwind Application Components

Admin Pannel Form

<div class="bg-gray-100">
  <div class="header flex h-16 items-center justify-between border-b-2 border-gray-200 bg-white px-10 py-8">
    <div class="flex items-center space-x-2 text-gray-400">
      <span class="text-md font-thin tracking-wider text-green-700"><a href="#">Home</a></span>
      <span>/</span>
      <span class="text-md tracking-wide">
        <span class="text-base">Categories</span>
      </span>
      <span>/</span>
    </div>
  </div>
  <div class="header my-3 flex h-12 items-center justify-between px-10">
    <h1 class="text-2xl font-medium">All Categories</h1>
  </div>
  <div class="mx-3 mt-6 flex flex-col lg:flex-row">
    <div class="m-1 w-full lg:w-1/3">
      <form class="w-full bg-white p-6 shadow-md">
        <div class="-mx-3 mb-6 flex flex-wrap">
          <div class="mb-6 w-full px-3 md:w-full">
            <label class="mb-2 block text-sm font-bold uppercase tracking-wide text-gray-700" htmlFor="category_name">Category Name</label>
            <input class="block w-full appearance-none rounded-lg border border-gray-400 bg-white px-3 py-3 font-medium leading-tight text-gray-900 focus:border-[#98c01d] focus:outline-none" type="text" name="name" placeholder="Category Name" required />
          </div>
          <div class="mb-6 w-full px-3">
            <textarea textarea rows="4" class="block w-full appearance-none rounded-lg border border-gray-400 bg-white px-3 py-3 font-medium leading-tight text-gray-900 focus:border-[#98c01d] focus:outline-none" type="text" name="description" required> </textarea>
          </div>

<div class="mb-6 w-full px-3 md:w-full">
            <button class="block w-full appearance-none rounded-lg border border-gray-200 bg-green-700 px-3 py-3 font-bold leading-tight text-gray-100 hover:bg-green-600 focus:border-gray-500 focus:bg-white focus:outline-none">Add Category</button>
          </div>

<div class="mb-8 w-full px-3">
            <label class="mx-auto flex w-full max-w-lg cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-green-400 bg-white p-6 text-center" htmlFor="dropzone-file">
              <i class="fa-solid fa-cloud-arrow-up h-28 w-28 text-green-800"></i>
              <h2 class="mt-4 text-xl font-medium tracking-wide text-gray-700">Category image</h2>

<p class="mt-2 tracking-wide text-gray-500">Upload or drag & drop your file SVG, PNG, JPG or GIF.</p>

<input id="dropzone-file" type="file" class="hidden" name="category_image" accept="image/png, image/jpeg, image/webp" />
            </label>
          </div>
        </div>
      </form>
    </div>
    <div class="m-1 w-full rounded-sm border border-gray-200 bg-white text-lg shadow-lg lg:w-2/3">
      <div class="overflow-x-auto rounded-lg p-3">
        <table class="w-full table-auto">
          <thead class="mx-auto bg-gray-50 p-1 text-sm font-semibold uppercase text-gray-800">
            <tr>
              <th></th>
              <th>
                <i class="fa-solid fa-file mx-auto h-5 w-5 fill-current"></i>
              </th>
              <th class="p-2">
                <div class="font-semibold">Category</div>
              </th>
              <th class="p-2">
                <div class="text-left font-semibold">Description</div>
              </th>
              <th class="p-2">
                <div class="text-center font-semibold">Action</div>
              </th>
            </tr>
            <tr>
              <td>1</td>
              <td><img src="https://images.pexels.com/photos/25652584/pexels-photo-25652584/free-photo-of-elegant-man-wearing-navy-suit.jpeg?auto=compress&cs=tinysrgb&w=400" class="mx-auto h-8 w-8" /></td>
              <td>Sample Name</td>
              <td>Sample Description</td>
              <td class="p-2">
                <div class="flex justify-center">
                  <a href="#" class="flex items-center justify-between rounded-md p-2 text-green-600 hover:bg-green-100">
                    <span><FaEdit class="mr-1 h-4 w-4" /> </span> Edit
                  </a>
                  <button class="flex items-center justify-between rounded-md p-2 text-red-600 hover:bg-red-100">
                    <span><FaTrash class="mr-1 h-4 w-4" /></span> Delete
                  </button>
                </div>
              </td>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

<js-component src="application/admin_pannel_form"></js-component>

Advance Layout Checkbox

View

<div class="flex w-full flex-col">
  <h3 class="mb-5 text-lg font-medium text-gray-900">Choose technology:</h3>
  <ul class="grid h-full w-full gap-6 md:grid-cols-3">
    <li>
      <input type="checkbox" id="react-option" value="" class="peer hidden" required="" />
      <label for="react-option" class="inline-flex h-full w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-gray-600">
        <div class="block">
          <svg class="mb-2 h-7 w-7 text-sky-500" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z" /></svg>
          <div class="w-full text-lg font-semibold">React Js</div>
          <div class="w-full text-sm">A JavaScript library for building user interfaces.</div>
        </div>
      </label>
    </li>
    <li>
      <input type="checkbox" id="flowbite-option" value="" class="peer hidden" />
      <label for="flowbite-option" class="inline-flex h-full w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-gray-600">
        <div class="block">
          <svg class="mb-2 h-7 w-7 text-green-400" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z" /></svg>
          <div class="w-full text-lg font-semibold">Vue Js</div>
          <div class="w-full text-sm">Vue.js is an model–view front end JavaScript framework.</div>
        </div>
      </label>
    </li>
    <li>
      <input type="checkbox" id="angular-option" value="" class="peer hidden" />
      <label for="angular-option" class="inline-flex h-full w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-gray-600">
        <div class="block">
          <svg class="mb-2 h-7 w-7 text-red-600" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z" /></svg>
          <div class="w-full text-lg font-semibold">Angular</div>
          <div class="w-full text-sm">A TypeScript-based web application framework.</div>
        </div>
      </label>
    </li>
  </ul>
</div>

<js-component src="application/advance_layout_checkbox"></js-component>

Checkbox Dropdown

View

<div x-data="{open :false}" class="flex w-full flex-col">
  <div class="inset-0 flex">
    <button @click="open = !open" id="dropdownSearchButton" data-dropdown-toggle="dropdownSearch" class="inline-flex items-center rounded-lg bg-blue-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" type="button">
      Dropdown search
      <svg class="ms-2.5 h-2.5 w-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
      </svg>
    </button>
  </div>

<div x-show="open" id="dropdownSearch" class="z-10 w-60 rounded-lg bg-white shadow">
    <div class="p-3">
      <label for="input-group-search" class="sr-only">Search</label>
      <div class="relative">
        <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
          <svg class="h-4 w-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
          </svg>
        </div>
        <input type="text" id="input-group-search" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="Search user" />
      </div>
    </div>
    <ul class="h-48 overflow-y-auto px-3 pb-3 text-sm text-gray-700" aria-labelledby="dropdownSearchButton">
      <li>
        <div class="flex items-center rounded p-2 hover:bg-gray-100">
          <input id="checkbox-item-11" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
          <label for="checkbox-item-11" class="ms-2 w-full rounded text-sm font-medium text-gray-900">Bonnie Green</label>
        </div>
      </li>
      <li>
        <div class="flex items-center rounded p-2 hover:bg-gray-100">
          <input checked id="checkbox-item-12" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
          <label for="checkbox-item-12" class="ms-2 w-full rounded text-sm font-medium text-gray-900">Jese Leos</label>
        </div>
      </li>
      <li>
        <div class="flex items-center rounded p-2 hover:bg-gray-100">
          <input id="checkbox-item-13" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
          <label for="checkbox-item-13" class="ms-2 w-full rounded text-sm font-medium text-gray-900">Michael Gough</label>
        </div>
      </li>
      <li>
        <div class="flex items-center rounded p-2 hover:bg-gray-100">
          <input id="checkbox-item-14" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
          <label for="checkbox-item-14" class="ms-2 w-full rounded text-sm font-medium text-gray-900">Robert Wall</label>
        </div>
      </li>
      <li>
        <div class="flex items-center rounded p-2 hover:bg-gray-100">
          <input id="checkbox-item-15" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
          <label for="checkbox-item-15" class="ms-2 w-full rounded text-sm font-medium text-gray-900">Joseph Mcfall</label>
        </div>
      </li>
      <li>
        <div class="flex items-center rounded p-2 hover:bg-gray-100">
          <input id="checkbox-item-16" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
          <label for="checkbox-item-16" class="ms-2 w-full rounded text-sm font-medium text-gray-900">Leslie Livingston</label>
        </div>
      </li>
      <li>
        <div class="flex items-center rounded p-2 hover:bg-gray-100">
          <input id="checkbox-item-17" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
          <label for="checkbox-item-17" class="ms-2 w-full rounded text-sm font-medium text-gray-900">Roberta Casas</label>
        </div>
      </li>
    </ul>
    <a href="#" class="flex items-center rounded-b-lg border-t border-gray-200 bg-gray-50 p-3 text-sm font-medium text-red-600 hover:bg-gray-100 hover:underline">
      <svg class="me-2 h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
        <path d="M6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Zm11-3h-6a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2Z" />
      </svg>
      Delete user
    </a>
  </div>
</div>

<js-component src="application/checkbox_dropdown"></js-component>

Horizontal CheckBox Group

View

<div class="flex flex-col w-full">
  <h3 class="mb-4 font-semibold text-gray-900 dark:text-white">Identification</h3>
  <ul class="w-full items-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 sm:flex">
    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r">
      <div class="flex items-center ps-3">
        <input id="vue-checkbox-list" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
        <label for="vue-checkbox-list" class="ms-2 w-full py-3 text-sm font-medium text-gray-900">Vue JS</label>
      </div>
    </li>
    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r">
      <div class="flex items-center ps-3">
        <input id="react-checkbox-list" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
        <label for="react-checkbox-list" class="ms-2 w-full py-3 text-sm font-medium text-gray-900">React</label>
      </div>
    </li>
    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r">
      <div class="flex items-center ps-3">
        <input id="angular-checkbox-list" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
        <label for="angular-checkbox-list" class="ms-2 w-full py-3 text-sm font-medium text-gray-900">Angular</label>
      </div>
    </li>
    <li class="w-full">
      <div class="flex items-center ps-3">
        <input id="laravel-checkbox-list" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
        <label for="laravel-checkbox-list" class="ms-2 w-full py-3 text-sm font-medium text-gray-900">Laravel</label>
      </div>
    </li>
  </ul>
</div>

<js-component src="application/horizontal_checkbox_group"></js-component>

Checkbox List Group

View

<div class="flex flex-col">
  <h3 class="mb-4 font-semibold text-gray-900">Technology</h3>
  <ul class="w-48 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900">
    <li class="w-full rounded-t-lg border-b border-gray-200">
      <div class="flex items-center ps-3">
        <input id="vue-checkbox" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
        <label for="vue-checkbox" class="ms-2 w-full py-3 text-sm font-medium text-gray-900">Vue JS</label>
      </div>
    </li>
    <li class="w-full rounded-t-lg border-b border-gray-200">
      <div class="flex items-center ps-3">
        <input id="react-checkbox" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
        <label for="react-checkbox" class="ms-2 w-full py-3 text-sm font-medium text-gray-900">React</label>
      </div>
    </li>
    <li class="w-full rounded-t-lg border-b border-gray-200">
      <div class="flex items-center ps-3">
        <input id="angular-checkbox" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
        <label for="angular-checkbox" class="ms-2 w-full py-3 text-sm font-medium text-gray-900">Angular</label>
      </div>
    </li>
    <li class="w-full rounded-t-lg border-b border-gray-200">
      <div class="flex items-center ps-3">
        <input id="laravel-checkbox" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
        <label for="laravel-checkbox" class="ms-2 w-full py-3 text-sm font-medium text-gray-900">Laravel</label>
      </div>
    </li>
  </ul>
</div>

<js-component src="application/checkbox_list_group"></js-component>

Bordered Checkbox

View

<js-component src="application/bordered_checkbox"></js-component>

Helper Text Checkbox

View

<js-component src="application/helper_text_checkbox"></js-component>

Checkbox Link

View

<js-component src="application/checkbox_link"></js-component>

Hyper Text label

View

<js-component src="application/hyper_text_label"></js-component>

Diabled State Label

View

<div class="flex w-full items-center justify-evenly">
  <div class="relative">
    <input type="text" id="disabled_filled" class="peer block w-full appearance-none rounded-t-lg border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" " disabled />
    <label for="disabled_filled" class="absolute start-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-400 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-blue-600 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4">Disabled filled</label>
  </div>
  <div class="relative">
    <input type="text" id="disabled_outlined" class="border-1 peer block w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-2.5 pb-2.5 pt-4 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" " disabled />
    <label for="disabled_outlined" class="absolute start-1 top-2 z-10 origin-[0] -translate-y-4 scale-75 transform bg-white px-2 text-sm text-gray-400 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-blue-600 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4">Disabled outlined</label>
  </div>
  <div class="relative z-0">
    <input type="text" id="disabled_standard" class="peer block w-full appearance-none border-0 border-b-2 border-gray-300 bg-transparent px-0 py-2.5 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" " disabled />
    <label for="disabled_standard" class="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform text-sm text-gray-400 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:text-blue-600 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4">Disabled standard</label>
  </div>
</div>

<js-component src="application/disabled_state_label"></js-component>

Floating Label Example

View

<div class="flex w-full items-center justify-evenly">
  <div class="relative">
    <input type="text" id="floating_filled" class="peer block w-full appearance-none rounded-t-lg border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" " />
    <label for="floating_filled" class="absolute start-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-blue-600 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4">Floating filled</label>
  </div>
  <div class="relative">
    <input type="text" id="floating_outlined" class="border-1 peer block w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-2.5 pb-2.5 pt-4 text-sm text-gray-900 focus:border focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" " />
    <label for="floating_outlined" class="absolute start-1 top-2 z-10 origin-[0] -translate-y-4 scale-75 transform bg-white px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-blue-600 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4">Floating outlined</label>
  </div>
  <div class="relative z-0">
    <input type="text" id="floating_standard" class="peer block w-full appearance-none border-0 border-b-2 border-gray-300 bg-transparent px-0 py-2.5 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" " />
    <label for="floating_standard" class="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:text-blue-600 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4">Floating standard</label>
  </div>
</div>

<js-component src="application/floating_label_example"></js-component>

Chatroom Input

View

<form class="w-full">
  <label for="chat" class="sr-only">Your message</label>
  <div class="flex items-center rounded-lg bg-gray-50 px-3 py-2">
    <button type="button" class="inline-flex cursor-pointer justify-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
      <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18">
        <path fill="currentColor" d="M13 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM7.565 7.423 4.5 14h11.518l-2.516-3.71L11 13 7.565 7.423Z" />
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 1H2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Z" />
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM7.565 7.423 4.5 14h11.518l-2.516-3.71L11 13 7.565 7.423Z" />
      </svg>
      <span class="sr-only">Upload image</span>
    </button>
    <button type="button" class="cursor-pointer rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
      <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.408 7.5h.01m-6.876 0h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM4.6 11a5.5 5.5 0 0 0 10.81 0H4.6Z" />
      </svg>
      <span class="sr-only">Add emoji</span>
    </button>
    <textarea id="chat" rows="1" class="mx-4 block w-full rounded-lg border border-gray-300 bg-white p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="Your message..."></textarea>
    <button type="submit" class="inline-flex cursor-pointer justify-center rounded-full p-2 text-blue-600 hover:bg-blue-100">
      <svg class="h-5 w-5 rotate-90 rtl:-rotate-90" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
        <path d="m17.914 18.594-8-18a1 1 0 0 0-1.828 0l-8 18a1 1 0 0 0 1.157 1.376L8 18.281V9a1 1 0 0 1 2 0v9.281l6.758 1.689a1 1 0 0 0 1.156-1.376Z" />
      </svg>
      <span class="sr-only">Send message</span>
    </button>
  </div>
</form>

<js-component src="application/chat_room_input"></js-component>

Jamstacker Editor

View

<form class="flex w-full flex-col">
  <div class="mb-4 w-full rounded-lg border border-gray-200 bg-gray-50">
    <div class="flex items-center justify-between border-b px-3 py-2">
      <div class="flex flex-wrap items-center divide-gray-200 sm:divide-x sm:rtl:divide-x-reverse">
        <div class="flex items-center space-x-1 sm:pe-4 rtl:space-x-reverse">
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 20">
              <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M1 6v8a5 5 0 1 0 10 0V4.5a3.5 3.5 0 1 0-7 0V13a2 2 0 0 0 4 0V6" />
            </svg>
            <span class="sr-only">Attach file</span>
          </button>
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
              <path d="M8 0a7.992 7.992 0 0 0-6.583 12.535 1 1 0 0 0 .12.183l.12.146c.112.145.227.285.326.4l5.245 6.374a1 1 0 0 0 1.545-.003l5.092-6.205c.206-.222.4-.455.578-.7l.127-.155a.934.934 0 0 0 .122-.192A8.001 8.001 0 0 0 8 0Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
            </svg>
            <span class="sr-only">Embed map</span>
          </button>
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
              <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
              <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
            </svg>
            <span class="sr-only">Upload image</span>
          </button>
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
              <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
              <path d="M14.067 0H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.933-2ZM6.709 13.809a1 1 0 1 1-1.418 1.409l-2-2.013a1 1 0 0 1 0-1.412l2-2a1 1 0 0 1 1.414 1.414L5.412 12.5l1.297 1.309Zm6-.6-2 2.013a1 1 0 1 1-1.418-1.409l1.3-1.307-1.295-1.295a1 1 0 0 1 1.414-1.414l2 2a1 1 0 0 1-.001 1.408v.004Z" />
            </svg>
            <span class="sr-only">Format code</span>
          </button>
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM13.5 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-7 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm3.5 9.5A5.5 5.5 0 0 1 4.6 11h10.81A5.5 5.5 0 0 1 10 15.5Z" />
            </svg>
            <span class="sr-only">Add emoji</span>
          </button>
        </div>
        <div class="flex flex-wrap items-center space-x-1 sm:ps-4 rtl:space-x-reverse">
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 18">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.5 3h9.563M9.5 9h9.563M9.5 15h9.563M1.5 13a2 2 0 1 1 3.321 1.5L1.5 17h5m-5-15 2-1v6m-2 0h4" />
            </svg>
            <span class="sr-only">Add list</span>
          </button>
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
              <path d="M18 7.5h-.423l-.452-1.09.3-.3a1.5 1.5 0 0 0 0-2.121L16.01 2.575a1.5 1.5 0 0 0-2.121 0l-.3.3-1.089-.452V2A1.5 1.5 0 0 0 11 .5H9A1.5 1.5 0 0 0 7.5 2v.423l-1.09.452-.3-.3a1.5 1.5 0 0 0-2.121 0L2.576 3.99a1.5 1.5 0 0 0 0 2.121l.3.3L2.423 7.5H2A1.5 1.5 0 0 0 .5 9v2A1.5 1.5 0 0 0 2 12.5h.423l.452 1.09-.3.3a1.5 1.5 0 0 0 0 2.121l1.415 1.413a1.5 1.5 0 0 0 2.121 0l.3-.3 1.09.452V18A1.5 1.5 0 0 0 9 19.5h2a1.5 1.5 0 0 0 1.5-1.5v-.423l1.09-.452.3.3a1.5 1.5 0 0 0 2.121 0l1.415-1.414a1.5 1.5 0 0 0 0-2.121l-.3-.3.452-1.09H18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 18 7.5Zm-8 6a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z" />
            </svg>
            <span class="sr-only">Settings</span>
          </button>
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
              <path d="M18 2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM2 18V7h6.7l.4-.409A4.309 4.309 0 0 1 15.753 7H18v11H2Z" />
              <path d="M8.139 10.411 5.289 13.3A1 1 0 0 0 5 14v2a1 1 0 0 0 1 1h2a1 1 0 0 0 .7-.288l2.886-2.851-3.447-3.45ZM14 8a2.463 2.463 0 0 0-3.484 0l-.971.983 3.468 3.468.987-.971A2.463 2.463 0 0 0 14 8Z" />
            </svg>
            <span class="sr-only">Timeline</span>
          </button>
          <button type="button" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
              <path d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z" />
              <path d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
            </svg>
            <span class="sr-only">Download</span>
          </button>
        </div>
      </div>
      <button type="button" data-tooltip-target="tooltip-fullscreen" class="cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 sm:ms-auto">
        <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1h5m0 0v5m0-5-5 5M1.979 6V1H7m0 16.042H1.979V12M18 12v5.042h-5M13 12l5 5M2 1l5 5m0 6-5 5" />
        </svg>
        <span class="sr-only">Full screen</span>
      </button>
      <div id="tooltip-fullscreen" role="tooltip" class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300">
        Show full screen
        <div class="tooltip-arrow" data-popper-arrow></div>
      </div>
    </div>
    <div class="rounded-b-lg bg-white px-4 py-2">
      <label for="editor" class="sr-only">Publish post</label>
      <textarea id="editor" rows="8" class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0" placeholder="Write an article..." required></textarea>
    </div>
  </div>
  <div class="inset-0 flex">
    <button type="submit" class="inline-flex items-center rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-200">Publish post</button>
  </div>
</form>

<js-component src="application/jamstacker_editor"></js-component>

Comment Box

View

<section class="flex w-full flex-col">
  <form>
    <div class="mb-4 w-full rounded-lg border border-gray-200 bg-gray-50">
      <div class="rounded-t-lg bg-white px-4 py-2">
        <label for="comment" class="sr-only">Your comment</label>
        <textarea id="comment" rows="4" class="w-full border-0 bg-white px-0 text-sm text-gray-900 focus:ring-0" placeholder="Write a comment..." required></textarea>
      </div>
      <div class="flex items-center justify-between border-t px-3 py-2 dark:border-gray-600">
        <button type="submit" class="inline-flex items-center rounded-lg bg-blue-700 px-4 py-2.5 text-center text-xs font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-200">Post comment</button>
        <div class="flex space-x-1 ps-0 sm:ps-2 rtl:space-x-reverse">
          <button type="button" class="inline-flex cursor-pointer items-center justify-center rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 20">
              <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M1 6v8a5 5 0 1 0 10 0V4.5a3.5 3.5 0 1 0-7 0V13a2 2 0 0 0 4 0V6" />
            </svg>
            <span class="sr-only">Attach file</span>
          </button>
          <button type="button" class="inline-flex cursor-pointer items-center justify-center rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
              <path d="M8 0a7.992 7.992 0 0 0-6.583 12.535 1 1 0 0 0 .12.183l.12.146c.112.145.227.285.326.4l5.245 6.374a1 1 0 0 0 1.545-.003l5.092-6.205c.206-.222.4-.455.578-.7l.127-.155a.934.934 0 0 0 .122-.192A8.001 8.001 0 0 0 8 0Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
            </svg>
            <span class="sr-only">Set location</span>
          </button>
          <button type="button" class="inline-flex cursor-pointer items-center justify-center rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
            <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
              <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
            </svg>
            <span class="sr-only">Upload image</span>
          </button>
        </div>
      </div>
    </div>
  </form>
  <p class="ms-auto text-xs text-gray-500">Remember, contributions to this topic should follow our <a href="#" class="text-blue-600 hover:underline">Community Guidelines</a>.</p>
</section>

<js-component src="application/comment_box"></js-component>

Toggle Colors

View

<label class="me-5 inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" checked />
    <div class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-green-300 rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-900">Green</span>
  </label>

<label class="me-5 inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" checked />
    <div class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-purple-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-purple-300 rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-900">Purple</span>
  </label>

<label class="me-5 inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" checked />
    <div class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-yellow-400 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-yellow-300 rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-900">Yellow</span>
  </label>

<label class="me-5 inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" checked />
    <div class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-orange-500 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-orange-300 rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-900">Orange</span>
  </label>
</div>

<js-component src="application/toggle_colors"></js-component>

Toggle Sizes

View

<div class="flex flex-col">
  <label class="mb-5 inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" />
    <div class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-900">Small toggle</span>
  </label>

<label class="mb-5 inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" />
    <div class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-900">Default toggle</span>
  </label>

<label class="inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" />
    <div class="peer relative h-7 w-14 rounded-full bg-gray-200 after:absolute after:start-[4px] after:top-0.5 after:h-6 after:w-6 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-900">Large toggle</span>
  </label>
</div>

<js-component src="application/toggle_sizes"></js-component>

Toggle Disable State

View

<div class="flex flex-col">
  <label class="mb-5 inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" disabled />
    <div class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-400">Disabled toggle</span>
  </label>

<label class="inline-flex cursor-pointer items-center">
    <input type="checkbox" value="" class="peer sr-only" checked disabled />
    <div class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full"></div>
    <span class="ms-3 text-sm font-medium text-gray-400">Disabled checked</span>
  </label>
</div>

<js-component src="application/toggle_disable_state"></js-component>

Date Picker

View

<div x-data="{ date: null }" class="relative">
    <div class="relative">
        <input 
            type="text"
            x-ref="input"
            placeholder="Select date"
            class="
                w-full
                pl-10 pr-4 py-2
                border border-gray-300
                rounded-md
                focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
                cursor-pointer
                bg-white
            "
            x-init="flatpickr($refs.input, {
                altInput: true,
                dateFormat: 'Y-m-d',
                onChange: date => $data.date = date[0],
                disableMobile: true,
                defaultDate: new Date()
            })"
            readonly
        >
        <div class="
            absolute 
            left-3 
            top-1/2 
            transform 
            -translate-y-1/2 
            text-gray-400
            pointer-events-none
        ">
            <i class="fas fa-calendar"></i>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<js-component src="application/date_picker"></js-component>

Drop Down Date Picker

View

<form class="mx-auto">
    <label for="time" class="block mb-2 text-sm font-medium text-gray-900">Select time:</label>
    <div class="flex relative" x-data="{
            open: false,
            toggle() {
                if (this.open) {
                    return this.close()
                }
 
                this.$refs.button.focus()
 
                this.open = true
            },
            close(focusAfter) {
                if (! this.open) return
 
                this.open = false
 
                focusAfter && focusAfter.focus()
            }
        }"
        x-on:keydown.escape.prevent.stop="close($refs.button)"
        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
        x-id="['dropdown-button']"
>
        <input type="time" id="time" class="rounded-none rounded-s-lg bg-gray-50 border text-gray-900 leading-none focus:ring-blue-500 focus:border-blue-500 block flex-1 w-full text-sm border-gray-300 p-2.5" min="09:00" max="18:00" value="00:00" required>
        <button x-ref="button"
            x-on:click="toggle()"
            :aria-expanded="open"
            :aria-controls="$id('dropdown-button')" id="dropdown-duration-button" data-dropdown-toggle="dropdown-duration" class="border-s-0 flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-e-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100" type="button">
        Duration <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/></svg>
        </button>
        <div id="dropdown-duration" x-ref="panel"
            x-show="open"
            x-transition.origin.top.left
            x-on:click.outside="close($refs.button)"
            :id="$id('dropdown-button')" class="absolute top-12 right-0 z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-36">
            <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdown-duration-button">
                <li>
                    <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
                        30 minutes
                    </button>
                </li>
                <li>
                    <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
                        1 hour
                    </button>
                </li>
                <li>
                    <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
                        2 hours
                    </button>
                </li>
            </ul>
        </div>
    </div>
</form>

<js-component src="application/drop_date_picker"></js-component>

Form Disable

View

<js-component src="application/form_disable"></js-component>

Select Dropdown

View

<js-component src="application/select_dropdown"></js-component>

Toggle Switch

View

<js-component src="application/toggle_switch"></js-component>

Form Layouts

View

<div class="max-w-lg mx-auto px-4 py-4">
  <h2 class="text-xl font-semibold mb-4">Vertical Form</h2>
  <div class="space-y-4">
    <div>
      <label for="name" class="block text-sm font-medium mb-1">Name</label>
      <input type="text" id="name" class="block w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
      <label for="email" class="block text-sm font-medium mb-1">Email</label>
      <input type="email" id="email" class="block w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
      <label for="message" class="block text-sm font-medium mb-1">Message</label>
      <textarea id="message" rows="4" class="block w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
    </div>
    <div>
      <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Submit</button>
    </div>
  </div>
</div>

<div class="max-w-lg mx-auto px-4 py-4 mt-8">
  <h2 class="text-xl font-semibold mb-4">Horizontal Form</h2>
  <div class="flex flex-col space-y-4">
    <div class="flex items-center">
      <label for="name-horizontal" class="w-1/4 text-sm font-medium mb-1">Name</label>
      <input type="text" id="name-horizontal" class="w-3/4 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div class="flex items-center">
      <label for="email-horizontal" class="w-1/4 text-sm font-medium mb-1">Email</label>
      <input type="email" id="email-horizontal" class="w-3/4 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div class="flex items-center">
      <label for="message-horizontal" class="w-1/4 text-sm font-medium mb-1">Message</label>
      <textarea id="message-horizontal" rows="2" class="w-3/4 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
    </div>
    <div class="flex justify-end">
      <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Submit</button>
    </div>
  </div>
</div>

<js-component src="application/form_layouts"></js-component>