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.

Create a responsive UI block named "Product Review Submission Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/product-review-forms/#product-review-submission-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: forms/product-review-forms
- Block ID: product-review-submission-form
- Source description: Centered review form combines reaction pickers, fit feedback, star ratings, text fields, and media upload controls.
- Preview iframe: https://preline.co/blocks/forms/product-review-forms/iframes/pro/product-review-submission-form.html (repo path: blocks/forms/product-review-forms/iframes/pro/product-review-submission-form.html)
- Source markup reference:
  - partials/pro/storefront/forms/write-a-clothing-product-review.html
  - partials/pro/storefront/radio-and-checkbox/emojis.html
  - partials/pro/storefront/radio-and-checkbox/timeline.html
  - partials/pro/storefront/radio-and-checkbox/size-selector.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Single `w-full max-w-md mx-auto` column, centered heading `Write your review`, and body sections spaced with `space-y-8`.
  - Product card is `p-3 flex items-center gap-x-5 bg-card border border-card-line rounded-xl` with a `size-16 object-cover rounded-lg` Unsplash photo (`photo-1699593022913-7068606059c8`) and the title `Nike SB Zoom Blazer Mid Electric`.
  - `Would you recommend this product?` offers two options in a 2-col grid - `😍` `Yes` and `😠` `No` - neither selected.
  - `How would you describe the fit?` shows the captions `Too tight`, `Perfect`, `Too loose` above five plain radios spread along a horizontal connector line; none selected.
  - Two identical 5-column star rows follow - `Overall rating`, then `How would you rate the comfort?` - each option labelled `1` through `5` beside an outline star, none selected.
  - Text fields in order: `Add a headline` (placeholder `What's most important to know?`) and `Add a review` (5-row textarea, placeholder `What did you like or dislike? What did you use this product for?`) whose `Tips` hs-tooltip lists five bullets under `Tips on how to write the perfect review`.
  - `Add a photo or video` renders two `size-20` dotted-border file inputs (image icon, then plus icon) plus the note `Shoppers find images and videos more helpful than text alone.`
  - Closing fields: `Your information` (placeholder `Nickname`, own `Tips` tooltip reading `Example: CoolMax. Protect your privacy by avoiding the use of your full name or email address.`), `Email` (placeholder `example@site.so`, helper `We will use your email address to follow-up on account issues, and for no other purpose.`), then the full-width primary button `Submit review`.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<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 [--placement:auto] 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-60 sm:w-full sm: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 [--placement:auto] 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-60 sm:w-full sm: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