Tailwind CSS Product Review Forms Blocks

All Blocks
Application UI
Forms
Product Review Forms

Product Review Forms

Product review forms for collecting ratings, fit feedback, and written purchase feedback after checkout or product use.

Product Review Submission Form Pro

Centered review form combines reaction pickers, fit feedback, star ratings, text fields, and media upload controls.

<div class="w-full max-w-md mx-auto">
                      
                      <div class="mb-10 text-center">
                        <h1 class="font-medium text-xl md:text-2xl text-foreground">
                          Write your review
                        </h1>
                      </div>

<div class="grow">
                              <h2 class="text-foreground">
                                Nike SB Zoom Blazer Mid Electric
                              </h2>
                            </div>
                          </div>
                          
                        </div>

<div>
                          <h3 class="mb-3 text-sm font-medium text-foreground">
                            Would you recommend this product?
                          </h3>

<div class="grid grid-cols-2 gap-2">
                            
                            <label for="hs-pro-shprwrtpy" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shprwrtpy" class="hidden" name="hs-pro-shprwrtp" >
                              <span class="block">
                                <span class="text-base me-1">😍</span> <span class="text-sm">Yes</span>
                              </span>
                            </label>

<label for="hs-pro-shprwrtpn" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shprwrtpn" class="hidden" name="hs-pro-shprwrtp" >
                              <span class="block">
                                <span class="text-base me-1">😠</span> <span class="text-sm">No</span>
                              </span>
                            </label>
                            
                          </div>
                          
                        </div>

<div>
                          <h3 class="mb-3 text-sm font-medium text-foreground">
                            How would you describe the fit?
                          </h3>

<div class="mb-3 flex justify-between items-center gap-5">
                            <span class="text-xs text-muted-foreground-1">Too tight</span>
                            <span class="text-xs text-muted-foreground-1">Perfect</span>
                            <span class="text-xs text-muted-foreground-1">Too loose</span>
                          </div>

<div class="flex justify-between items-center gap-5 relative after:absolute after:top-1/2 after:inset-x-0 after:w-full after:h-px after:bg-surface-1 after:-translate-y-1/2">
                            
                            <label for="hs-pro-shprft-too-tight" class="group relative z-1 inline-flex items-center cursor-pointer text-sm">
                              <input type="radio" name="hs-pro-shprft" class="shrink-0 size-5 bg-layer border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shprft-too-tight" value="Too tight">
                              <span class="sr-only">Too tight</span>
                            </label>

<label for="hs-pro-shprft-slightly-tight" class="group relative z-1 inline-flex items-center cursor-pointer text-sm">
                              <input type="radio" name="hs-pro-shprft" class="shrink-0 size-5 bg-layer border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shprft-slightly-tight" value="Slightly-tight">
                              <span class="sr-only">Slightly-tight</span>
                            </label>

<label for="hs-pro-shprft-perfect" class="group relative z-1 inline-flex items-center cursor-pointer text-sm">
                              <input type="radio" name="hs-pro-shprft" class="shrink-0 size-5 bg-layer border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shprft-perfect" value="Perfect">
                              <span class="sr-only">Perfect</span>
                            </label>

<label for="hs-pro-shprft-slightly-loose" class="group relative z-1 inline-flex items-center cursor-pointer text-sm">
                              <input type="radio" name="hs-pro-shprft" class="shrink-0 size-5 bg-layer border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shprft-slightly-loose" value="Slightly loose">
                              <span class="sr-only">Slightly loose</span>
                            </label>

<label for="hs-pro-shprft-too-loose" class="group relative z-1 inline-flex items-center cursor-pointer text-sm">
                              <input type="radio" name="hs-pro-shprft" class="shrink-0 size-5 bg-layer border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shprft-too-loose" value="Too loose">
                              <span class="sr-only">Too loose</span>
                            </label>
                            
                          </div>
                          
                        </div>

<div>
                          <h3 class="mb-3 text-sm font-medium text-foreground">
                            Overall rating
                          </h3>

<div class="grid grid-cols-5 gap-2">
                            
                            <label for="hs-pro-shpror1star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shpror1star" class="hidden" name="hs-pro-shpror" >
                              <span class="block">
                                1 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>

<label for="hs-pro-shpror2star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shpror2star" class="hidden" name="hs-pro-shpror" >
                              <span class="block">
                                2 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>

<label for="hs-pro-shpror3star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shpror3star" class="hidden" name="hs-pro-shpror" >
                              <span class="block">
                                3 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>

<label for="hs-pro-shpror4star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shpror4star" class="hidden" name="hs-pro-shpror" >
                              <span class="block">
                                4 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>

<label for="hs-pro-shpror5star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shpror5star" class="hidden" name="hs-pro-shpror" >
                              <span class="block">
                                5 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>
                            
                          </div>
                          
                        </div>

<div>
                          <h3 class="mb-3 text-sm font-medium text-foreground">
                            How would you rate the comfort?
                          </h3>

<div class="grid grid-cols-5 gap-2">
                            
                            <label for="hs-pro-shprcm1star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shprcm1star" class="hidden" name="hs-pro-shprcm" >
                              <span class="block">
                                1 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>

<label for="hs-pro-shprcm2star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shprcm2star" class="hidden" name="hs-pro-shprcm" >
                              <span class="block">
                                2 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>

<label for="hs-pro-shprcm3star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shprcm3star" class="hidden" name="hs-pro-shprcm" >
                              <span class="block">
                                3 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>

<label for="hs-pro-shprcm4star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shprcm4star" class="hidden" name="hs-pro-shprcm" >
                              <span class="block">
                                4 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>

<label for="hs-pro-shprcm5star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                            has-checked:text-primary-checked
                            has-checked:border-primary-checked
                            has-checked:ring-1
                            has-checked:ring-primary-checked
                            has-disabled:pointer-events-none
                            has-disabled:opacity-70
                            has-disabled:text-line-2
                            has-disabled:after:absolute
                            has-disabled:after:inset-0
                            has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                              <input type="radio" id="hs-pro-shprcm5star" class="hidden" name="hs-pro-shprcm" >
                              <span class="block">
                                5 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                              </span>
                            </label>
                            
                          </div>
                          
                        </div>

<div>
                          <label for="hs-pro-shwprmah" class="block mb-2 text-sm font-medium text-foreground">
                            Add a headline
                          </label>

<div>
                          <div class="flex justify-between items-center gap-x-2 mb-2">
                            <span class="text-sm font-medium text-foreground">
                              Add a review
                            </span>

<div class="hs-tooltip inline-block">
                              <span class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1 underline underline-offset-4">
                                <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                                Tips
                              </span>
          
                              <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 w-full max-w-96 p-4 bg-popover border border-popover-line rounded-lg shadow-md" role="tooltip">
                                <h3 class="mb-3 text-sm font-medium text-foreground">
                                  Tips on how to write the perfect review
                                </h3>

<ul class="ps-1 space-y-1">
                                  <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    Share what you like or dislike about the product – for example, if it's comfortable, has a great color, etc.
                                  </li>
                                  <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    Avoid mentioning prices or promotions, as these can change over time.
                                  </li>
                                  <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    Keep your review concise – while details are valuable, ensure it's brief enough to be easily read.
                                  </li>
                                  <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    Use appropriate language – even if you're enthusiastic about our product, avoid using any words you wouldn't say in front of your grandmother!
                                  </li>
                                  <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    Stay focused on the product – if your concern is about something other than the product itself (e.g., delivery, pricing), please reach out to our customer service team so they can assist you.
                                  </li>
                                </ul>
                                
                              </div>
                            </div>
                          </div>

<div>
                          <label class="block mb-2 text-sm font-medium text-foreground">
                            Add a photo or video
                          </label>

<div class="flex flex-wrap gap-2">
                            <label for="hs-pro-shwprapov" class="relative cursor-pointer flex shrink-0 justify-center items-center size-20 border-2 border-dotted border-line-3 text-muted-foreground rounded-xl hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus">
                              <span class="sr-only">Browse</span>
                              <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 5h6"/><path d="M19 2v6"/><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/><circle cx="9" cy="9" r="2"/></svg>
                              <input id="hs-pro-shwprapov" type="file" class="sr-only" name="hs-pro-shwprapov">
                            </label>

<label for="hs-pro-shwprapovam" class="relative cursor-pointer flex shrink-0 justify-center items-center size-20 border-2 border-dotted border-line-3 text-muted-foreground rounded-xl hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus">
                              <span class="sr-only">Browse</span>
                              <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                              <input id="hs-pro-shwprapovam" type="file" class="sr-only" name="hs-pro-shwprapovam">
                            </label>
                          </div>

<div class="mt-3">
                            <p class="text-xs text-muted-foreground-1">
                              Shoppers find images and videos more helpful than text alone.
                            </p>
                          </div>
                        </div>

<div>
                          <div class="flex justify-between items-center gap-x-2 mb-2">
                            <span class="text-sm font-medium text-foreground">
                              Your information
                            </span>

<div class="hs-tooltip inline-block">
                              <span class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1 underline underline-offset-4">
                                <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                                Tips
                              </span>
          
                              <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 max-w-72 p-4 bg-popover border border-popover-line rounded-lg shadow-md" role="tooltip">
                                <p class="text-sm text-muted-foreground-1">
                                  Example: CoolMax. Protect your privacy by avoiding the use of your full name or email address.
                                </p>
                              </div>
                            </div>
                          </div>

<div>
                          <label for="hs-pro-shchfem" class="block mb-2 text-sm font-medium text-foreground">
                            Email
                          </label>

<p class="mt-2 text-xs text-muted-foreground-1">
                            We will use your email address to follow-up on account issues, and for no other purpose.
                          </p>
                        </div>

<button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 sm:text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                          Submit review
                        </button>
                      </div>
                    </div>

Open related product review template