Close Menu
    Tailwind Components

    Tailwind Advanced Inputs Components

    Terry WhiteBy No Comments12 Mins Read

    Tailwind is a popular CSS framework that provides a set of pre-designed components that can be used to build web applications quickly and easily. One category of components available in Tailwind is “Advanced Inputs,” which are designed to provide more advanced input capabilities and functionality compared to the basic input components.

    Some examples of Tailwind Advanced Inputs Components include:

    1. Datepicker: A component that provides users with a graphical calendar interface to select a date.
    2. Timepicker: A component that allows users to select a time from a graphical interface.
    3. Dropdown: A component that displays a list of options when clicked, allowing users to select one.
    4. Checkbox: A component that allows users to select one or more options from a list.
    5. Radio button: A component that allows users to select one option from a list of options.
    6. Toggle switch: A component that provides users with an on/off switch to control a setting.
    7. Slider: A component that allows users to select a value from a range by sliding a handle along a track.
    8. Autocomplete: A component that provides users with a list of suggested options as they type in an input field.
    9. File input: A component that allows users to select a file from their local machine to upload to the web application.

    Component #1

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Username</h3>
          <p class="text-sm text-neutral-500">Enter your website url</p>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto overflow-hidden border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <div class="flex flex-wrap sm:flex-nowrap sm:divide-x divide-neutral-200">
              <div class="w-full sm:w-auto">
                <div class="py-2 px-3.5 bg-light"><span class="text-sm font-medium">dashy.com/</span></div>
              </div>
              <div class="w-full sm:flex-1">
                <input class="py-3 px-3.5 text-sm w-full h-full outline-none hover:bg-gray-50 placeholder-neutral-400" id="inputsInput1-1" type="text" placeholder="username"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #2

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Max Meeting Duration</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto overflow-hidden border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <div class="flex flex-wrap sm:flex-nowrap sm:divide-x divide-neutral-200">
              <div class="w-full sm:flex-1">
                <input class="py-3 px-3.5 text-sm w-full h-full hover:bg-gray-50 outline-none placeholder-neutral-400" id="inputsInput2-1" type="text" placeholder="Min"/>
              </div>
              <div class="w-full sm:w-auto">
                <div class="py-2 px-3.5 bg-light"><span class="text-sm font-medium">Min</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #3

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Payment Per Hour</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto overflow-hidden border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <div class="flex flex-wrap sm:flex-nowrap sm:divide-x divide-neutral-200">
              <div class="w-full sm:w-auto">
                <div class="relative h-full">
                  <select class="appearance-none py-2 pl-3.5 pr-10 text-sm text-neutral-500 font-medium w-full h-full bg-light outline-none cursor-pointer">
                    <option value="USD">USD</option>
                    <option value="CHF">CHF</option>
                    <option value="EUR">EUR</option>
                    <option value="GBP">GBP</option>
                  </select>
                  <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="16" height="22" viewbox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.6673 9L8.00065 13.6667L3.33398 9" stroke="#495460" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
              <div class="w-full sm:flex-1">
                <input class="py-3 px-3.5 text-sm w-full h-full hover:bg-gray-50 outline-none placeholder-neutral-400" id="inputsInput3-1" type="text" placeholder="0.0"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #4

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Service Type</h3>
          <p class="text-sm text-neutral-400">Kind of service you want</p>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="relative h-full sm:max-w-md ml-auto">
            <select class="appearance-none py-2 pl-3.5 pr-10 text-sm w-full h-full bg-white hover:bg-gray-50 outline-none border border-neutral-200 focus:border-neutral-600 cursor-pointer rounded-lg" id="inputsSelect4-1">
              <option value="service">Select a service</option>
              <option value="service2">Select a service</option>
              <option value="service3">Select a service</option>
              <option value="service4">Select a service</option>
            </select>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="16" height="22" viewbox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.6673 9L8.00065 13.6667L3.33398 9" stroke="#0C1523" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #5

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Note</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <textarea class="block px-3.5 pb-3.5 pt-2.5 text-sm w-full sm:max-w-md ml-auto placeholder-neutral-400 hover:bg-gray-50 outline-none border border-neutral-200 focus:border-neutral-600 rounded-lg" id="inputsTextarea5-1" rows="4" placeholder="Write a short note"></textarea>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #6

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Job Role</h3>
          <p class="text-sm text-neutral-400">What do you do or operate</p>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="relative h-full sm:max-w-md ml-auto">
            <svg class="absolute top-1/2 left-3.5 transform -translate-y-1/2" width="16" height="22" viewbox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.33398 17H2.58398C2.58398 17.4142 2.91977 17.75 3.33398 17.75V17ZM12.6673 17V17.75C13.0815 17.75 13.4173 17.4142 13.4173 17H12.6673ZM9.91732 7.66667C9.91732 8.72521 9.0592 9.58333 8.00065 9.58333V11.0833C9.88762 11.0833 11.4173 9.55364 11.4173 7.66667H9.91732ZM8.00065 9.58333C6.94211 9.58333 6.08398 8.72521 6.08398 7.66667H4.58398C4.58398 9.55364 6.11368 11.0833 8.00065 11.0833V9.58333ZM6.08398 7.66667C6.08398 6.60812 6.94211 5.75 8.00065 5.75V4.25C6.11368 4.25 4.58398 5.77969 4.58398 7.66667H6.08398ZM8.00065 5.75C9.0592 5.75 9.91732 6.60812 9.91732 7.66667H11.4173C11.4173 5.77969 9.88762 4.25 8.00065 4.25V5.75ZM4.08398 17C4.08398 14.8369 5.83754 13.0833 8.00065 13.0833V11.5833C5.00911 11.5833 2.58398 14.0085 2.58398 17H4.08398ZM8.00065 13.0833C10.1638 13.0833 11.9173 14.8369 11.9173 17H13.4173C13.4173 14.0085 10.9922 11.5833 8.00065 11.5833V13.0833ZM3.33398 17.75H12.6673V16.25H3.33398V17.75Z" fill="#B8C1CC"></path>
            </svg>
            <select class="appearance-none py-2 pl-10 pr-10 text-sm w-full h-full bg-white hover:bg-gray-50 outline-none border border-neutral-200 focus:border-neutral-600 cursor-pointer rounded-lg" id="inputsSelect6-1">
              <option value="role">Select your role</option>
              <option value="role2">Select your role</option>
              <option value="role3">Select your role</option>
              <option value="role4">Select your role</option>
            </select>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="16" height="22" viewbox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.6673 9L8.00065 13.6667L3.33398 9" stroke="#0C1523" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #7

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Full Name</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex items-center justify-end sm:max-w-md overflow-hidden hover:bg-gray-50 border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <div class="pl-3.5">
              <svg width="16" height="22" viewbox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.33398 17H2.58398C2.58398 17.4142 2.91977 17.75 3.33398 17.75V17ZM12.6673 17V17.75C13.0815 17.75 13.4173 17.4142 13.4173 17H12.6673ZM9.91732 7.66667C9.91732 8.72521 9.0592 9.58333 8.00065 9.58333V11.0833C9.88762 11.0833 11.4173 9.55364 11.4173 7.66667H9.91732ZM8.00065 9.58333C6.94211 9.58333 6.08398 8.72521 6.08398 7.66667H4.58398C4.58398 9.55364 6.11368 11.0833 8.00065 11.0833V9.58333ZM6.08398 7.66667C6.08398 6.60812 6.94211 5.75 8.00065 5.75V4.25C6.11368 4.25 4.58398 5.77969 4.58398 7.66667H6.08398ZM8.00065 5.75C9.0592 5.75 9.91732 6.60812 9.91732 7.66667H11.4173C11.4173 5.77969 9.88762 4.25 8.00065 4.25V5.75ZM4.08398 17C4.08398 14.8369 5.83754 13.0833 8.00065 13.0833V11.5833C5.00911 11.5833 2.58398 14.0085 2.58398 17H4.08398ZM8.00065 13.0833C10.1638 13.0833 11.9173 14.8369 11.9173 17H13.4173C13.4173 14.0085 10.9922 11.5833 8.00065 11.5833V13.0833ZM3.33398 17.75H12.6673V16.25H3.33398V17.75Z" fill="#B8C1CC"></path>
              </svg>
            </div>
            <input class="py-2.5 pl-2 pr-3.5 text-sm w-full bg-transparent outline-none placeholder-neutral-400" id="inputsInput7-1" type="text" placeholder="Enter first &amp; last name"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #8

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Email Address</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto">
            <input class="mb-2.5 py-2.5 px-3.5 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400 border border-red-500 rounded-lg" id="inputsInput8-1" type="text" value="john&amp;gmail.com" placeholder="Email address"/>
            <p class="text-sm text-red-500">Wrong email format. Enter correct email address</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #9

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Add Image</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex flex-wrap sm:max-w-md ml-auto">
            <div class="w-full sm:flex-1 mb-2.5 sm:mb-0">
              <input class="py-2.5 px-3.5 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400 border border-neutral-200 sm:border-r-0 rounded-lg sm:rounded-tr-none sm:rounded-br-none focus-within:border-neutral-600" id="inputsInput9-1" type="text" placeholder="Click to select a file or drag and drop"/>
            </div>
            <div class="w-full sm:w-auto"><a class="inline-flex items-center justify-center px-3.5 py-2.5 text-sm w-full h-full text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300 sm:rounded-tl-none sm:rounded-bl-none" href="#">Upload</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #10

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Activate Auto Payment?</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5"><a class="text-sm" href="#">Off</a></div>
            <div class="w-auto p-1.5"><a class="flex items-center justify-start p-0.5 w-9 h-5 bg-neutral-200 rounded-full" href="#"><span class="inline-block w-4 h-4 bg-white rounded-full"></span></a></div>
            <div class="w-auto p-1.5"><a class="text-sm" href="#">On</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #11

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Why do you want to use Dashy?</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex mb-5">
            <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox11-1" checked="" type="checkbox"/>
            <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
              <svg width="9" height="7" viewbox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <label class="text-sm font-medium" for="inputsCheckbox11-1">For Marketing</label>
          </div>
          <div class="flex mb-5">
            <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox11-2" checked="" type="checkbox"/>
            <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
              <svg width="9" height="7" viewbox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <label class="text-sm font-medium" for="inputsCheckbox11-2">For SaaS</label>
          </div>
          <div class="flex">
            <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox11-3" type="checkbox"/>
            <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
              <svg width="9" height="7" viewbox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <label class="text-sm font-medium" for="inputsCheckbox11-3">For Own Software</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #12

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Activate Auto Payment?</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex flex-wrap -m-2.5">
            <div class="w-auto p-2.5">
              <div class="flex items-center">
                <input class="absolute opacity-0 w-4 h-4" id="default-radio-1" type="radio" value="" name="default-radio"/>
                <div class="mr-3 p-px bg-transparent border border-neutral-200 rounded-full">
                  <div class="flex items-center justify-center w-4 h-4 bg-white rounded-full">
                    <div class="bg-transparent w-2.5 h-2.5 rounded-full"></div>
                  </div>
                </div>
                <label class="text-sm" for="default-radio-1">Yes</label>
              </div>
            </div>
            <div class="w-auto p-2.5">
              <div class="flex items-center">
                <input class="absolute opacity-0 w-4 h-4" id="default-radio-2" type="radio" value="" name="default-radio"/>
                <div class="mr-3 p-px bg-transparent border border-neutral-200 rounded-full">
                  <div class="flex items-center justify-center w-4 h-4 bg-white rounded-full">
                    <div class="bg-transparent w-2.5 h-2.5 rounded-full"></div>
                  </div>
                </div>
                <label class="text-sm" for="default-radio-2">No</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #13

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Analytics Tracking Code</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto">
            <input class="py-2.5 px-3.5 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400 border border-neutral-200 rounded-lg focus-within:border-neutral-600" id="inputsInput13-1" type="text" placeholder="UA-XXXXXXXXXX"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #14

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Phone Number</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto overflow-hidden border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <div class="flex flex-wrap sm:flex-nowrap sm:divide-x divide-neutral-200">
              <div class="w-full sm:w-auto">
                <div class="relative h-full">
                  <select class="appearance-none py-2 pl-3.5 pr-10 text-sm text-neutral-500 font-medium w-full h-full bg-light outline-none cursor-pointer">
                    <option value="US">US (+1)</option>
                    <option value="US">US (+1)</option>
                    <option value="US">US (+1)</option>
                    <option value="US">US (+1)</option>
                  </select>
                  <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="16" height="22" viewbox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.6673 9L8.00065 13.6667L3.33398 9" stroke="#495460" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
              <div class="w-full sm:flex-1">
                <input class="py-3 px-3.5 text-sm w-full h-full hover:bg-gray-50 outline-none placeholder-neutral-400" id="inputsInput14-1" type="text" placeholder="111-222-3333"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #15

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Github Account</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto">
            <input class="mb-4 py-2.5 px-3.5 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400 border border-neutral-200 rounded-lg focus-within:border-neutral-600" id="inputsInput15-1" type="text"/>
            <div class="flex">
              <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox15-1" type="checkbox"/>
              <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
                <svg width="9" height="7" viewbox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <label class="text-sm font-medium" for="inputsCheckbox15-1">This is a team account</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #16

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="py-6 px-7 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading mb-2.5 text-sm font-semibold">Password</h3>
          <div class="relative mb-2.5 overflow-hidden border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <input class="py-2.5 pl-3.5 pr-11 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400" id="inputsInput16-1" type="text"/>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="16" height="22" viewbox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.99984 11.0002C9.99984 12.1047 9.10441 13.0002 7.99984 13.0002C6.89527 13.0002 5.99984 12.1047 5.99984 11.0002C5.99984 9.89559 6.89527 9.00016 7.99984 9.00016C9.10441 9.00016 9.99984 9.89559 9.99984 11.0002Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1.63867 11.0001C2.48819 8.29541 5.01504 6.3335 8.00013 6.3335C10.9852 6.3335 13.5121 8.29544 14.3616 11.0002C13.5121 13.7049 10.9852 15.6668 8.00014 15.6668C5.01504 15.6668 2.48817 13.7049 1.63867 11.0001Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <p class="text-sm text-neutral-400">Minimum 6 characters</p>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading mb-2.5 text-sm font-semibold">Confirm Password</h3>
          <div class="relative overflow-hidden border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <input class="py-2.5 pl-3.5 pr-11 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400" id="inputsInput16-2" type="text"/>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="16" height="22" viewbox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.99984 11.0002C9.99984 12.1047 9.10441 13.0002 7.99984 13.0002C6.89527 13.0002 5.99984 12.1047 5.99984 11.0002C5.99984 9.89559 6.89527 9.00016 7.99984 9.00016C9.10441 9.00016 9.99984 9.89559 9.99984 11.0002Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1.63867 11.0001C2.48819 8.29541 5.01504 6.3335 8.00013 6.3335C10.9852 6.3335 13.5121 8.29544 14.3616 11.0002C13.5121 13.7049 10.9852 15.6668 8.00014 15.6668C5.01504 15.6668 2.48817 13.7049 1.63867 11.0001Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #17

    <section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="py-6 px-7 bg-white border rounded-xl">
      <h3 class="font-heading mb-8 text-sm font-semibold">Alerts &amp; Notifications</h3>
      <div class="flex mb-5">
        <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox17-1" checked="" type="checkbox"/>
        <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
          <svg width="9" height="7" viewbox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <label class="text-sm font-medium" for="inputsCheckbox17-1">Get Dashy news, announcements, and product updates</label>
      </div>
      <div class="flex mb-5">
        <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox17-2" checked="" type="checkbox"/>
        <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
          <svg width="9" height="7" viewbox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <label class="text-sm font-medium" for="inputsCheckbox17-2">Get important notifications about you or activity you&apos;ve missed</label>
      </div>
      <div class="flex">
        <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox17-3" type="checkbox"/>
        <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
          <svg width="9" height="7" viewbox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <label class="text-sm font-medium" for="inputsCheckbox17-3">Get an email when a Dashy Meetup is posted close to my location</label>
      </div>
    </div>
  </div>
</section>

    Share.

    Terry White is a professional technical writer, WordPress developer, Web Designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him

    Related Posts

    Add A Comment
    Leave A Reply