Review popup form with toggle and stars

This tailwind example is contributed by Ayman Reifoun, on 22-Apr-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Vote,Social media links,

Button Form Input Comment Section Other Rating Social media buttons

Author Ayman Reifoun

Tailwind v3.4 1.3k 1

Fork Fullscreen

<div class='fixed m-auto inset-0 h-[77%] lg:w-[45%] sm:w-[90%] max-sm:w-[90%] overflow-scroll  z-40 bg-white shadow-2xl rounded-lg flex-col flex justify-between'>
          <div class='w-full my-2 flex flex-col gap-4'>
          <div class="px-2 py-1 border-b border-gray-200 flex justify-between items-center">
            <div class='flex-1 flex-col justify-center items-center flex translate-x-4'>
              <p class='text-gray-900 text-lg font-extrabold'>We would like to hear your Review. </p>
              <p class='text-gray-500 text-xs'>please complete the form below </p>
            </div>
            <div class="cursor-pointer w-6 h-6 relative z-40 font-extrabold">X</div>
          </div>

<img src="https://github.com/thomas5.png?size=56" class="h-16 w-16 mx-auto rounded-full"/>
            <div class='flex flex-col justify-center items-center '>
              <p class='text-gray-500 text-sm'>Developer Name : <span class='text-gray-900 font-bold'> Ayman Reifoun</span></p>
              <p class='text-gray-500 text-xs'>Role : <span class='text-gray-900 font-bold'> Full Stack</span></p>
            </div>
            <div class='flex-row w-full flex justify-center items-center my-2'>
                  <svg  class="w-4 h-4 ms-1 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
                </svg>
                <svg  class="w-4 h-4 ms-1 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
                </svg>
                <svg  class="w-4 h-4 ms-1 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
                </svg>
                <svg  class="w-4 h-4 ms-1 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
                </svg>
                <svg  class="w-4 h-4 ms-1 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
                </svg>
            </div>
          </div>
          <form class='p-4 flex flex-col gap-4'>

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

<label htmlFor="message" class="block my-1 text-sm font-medium text-gray-900 dark:text-white">Your message</label>
            <textarea  id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 " placeholder="Write your thoughts here..."></textarea>

</div>