Tailwind Components in Dashy library

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 pb-0 bg-white border rounded-xl">
      <h3 class="font-heading mb-8 text-lg font-semibold">Reviews</h3>
      <div class="flex flex-wrap -m-1.5">
        <div class="w-auto p-1.5">
          <img src="dashy-assets/images/stars.svg" alt="">
        </div>
        <div class="w-auto p-1.5">
          <p class="font-medium">3.5k reviews</p>
        </div>
      </div>
      <div class="chart" data-type="bar-graph15"></div>
    </div>
  </div>
</section>

<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" x-data="{ visible: false }">
            <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="visible ? 'text': 'password'" type="text">
            <svg x-on:click="visible = !visible" 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" x-data="{ visible: false }">
            <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="visible ? 'text': 'password'" type="text">
            <svg x-on:click="visible = !visible" 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>

<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'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>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 pb-8 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-1.5">
        <div class="w-full p-1.5">
          <h3 class="font-heading text-sm font-semibold">Personal Website</h3>
        </div>
        <div class="w-full p-1.5">
          <div class="flex items-center overflow-hidden hover:bg-gray-50 border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <span class="pl-3.5 text-sm text-neutral-400 select-none">https://</span>
            <input class="py-2.5 pr-3.5 text-sm w-full bg-transparent outline-none placeholder-neutral-400" id="inputsInput18-1" type="text" placeholder="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>