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>

Related Examples

omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Omer fils ELENGA

9 months ago

839
Form Layouts

Anonymous

2 years ago

4.3k
Amazon shopping buy now button
Amazon shopping buy now button

OmKar Mehta

2 years ago

2.8k
Login Form
Login Card Structure This code gives you a complete, self-contained login card. Here's what's included: Input Fields: Email and password fields with icons, labels, and placeholder text. The password field includes a "Forgot password?" link. Options & Actions: A "Remember me" checkbox and a prominent "Sign In" button with hover effects. Footer Links: A "Create one" link for new accounts and social login icons (Google and GitHub) for alternative sign-in methods.

Muzammil Riaz

3 months ago

180
form Rejoignez l'élite
formulaire Rejoignez l'élite

Omer fils ELENGA

7 months ago

708
Hero

Anonymous

1 week ago

26
Textarea input
Fancy Textarea

Piet Vriend

3 years ago

11.9k
responsive home page
the best home page

irahoza daniel

1 year ago

1.9k
Car booking form
Rental carr booking form to rent a car online

ehmasuk

11 months ago

871
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

1.9k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Anonymous

2 years ago

14.3k
form1

Anonymous

23 hours ago

4