User review form

Write a review form
star rating form

This tailwind example is contributed by Quentin Rivers, on 05-Oct-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Vote

Rating

Author Quentin Rivers

Tailwind v3.4 3.4k 4

Fork Fullscreen

<div class="p-4 mx-auto bg-white rounded-lg shadow-md max-w-4xl sm:p-6 grid grid-cols-1 lg:grid-cols-6 gap-6">
  <div class="lg:col-span-4 col-span-1">
    <form action="" method="POST" class="space-y-4">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">
        Write a review
      </h2>
      <div class="flex justify-start items-center space-x-1 mb-4">
        <input type="radio" id="5-stars" name="rating" value="5" class="hidden">
        <label for="5-stars" class="text-yellow-400 text-2xl cursor-pointer hover:scale-110">★</label>
        <input type="radio" id="4-stars" name="rating" value="4" class="hidden">
        <label for="4-stars" class="text-yellow-400 text-2xl cursor-pointer hover:scale-110">★</label>
        <input type="radio" id="3-stars" name="rating" value="3" class="hidden">
        <label for="3-stars" class="text-yellow-400 text-2xl cursor-pointer hover:scale-110">★</label>
        <input type="radio" id="2-stars" name="rating" value="2" class="hidden">
        <label for="2-stars" class="text-yellow-400 text-2xl cursor-pointer hover:scale-110">★</label>
        <input type="radio" id="1-star" name="rating" value="1" class="hidden">
        <label for="1-star" class="text-yellow-400 text-2xl cursor-pointer hover:scale-110">★</label>
      </div>
      <textarea id="review" name="review" rows="4" required="true" class="block w-full p-3 text-sm text-gray-900 bg-gray-50 rounded-md border border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Write your review"></textarea>
      <div class="text-right py-4">
        <a href="/user"
          class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold rounded-lg text-sm px-5 py-3">Login
          to Post Review</a>
      </div>
    </form>
  </div>
  <div class="lg:col-span-2 hidden lg:flex flex-col space-y-4">
    <div class="flex items-center">
      <span class="text-yellow-400 text-xl">★★★★★</span>
      <p class="ml-2 text-sm font-medium text-gray-900">0 out of 0</p>
    </div>
    <p class="text-sm font-medium text-gray-500">0 global ratings</p>
    <div class="flex items-center mt-2">
      <span class="text-sm font-medium text-blue-600 hover:underline shrink-0">5 star</span>
      <div class="w-3/4 h-4 mx-2 bg-gray-200 rounded">
        <div class="h-4 bg-yellow-400 rounded" style="width: 50%"></div>
      </div>
      <span class="text-sm font-medium text-gray-500">0%</span>
    </div>
    <div class="flex items-center">
      <span class="text-sm font-medium text-blue-600 hover:underline shrink-0">4 star</span>
      <div class="w-3/4 h-4 mx-2 bg-gray-200 rounded">
        <div class="h-4 bg-yellow-400 rounded" style="width: 25%"></div>
      </div>
      <span class="text-sm font-medium text-gray-500">0%</span>
    </div>
    <div class="flex items-center">
      <span class="text-sm font-medium text-blue-600 hover:underline shrink-0">3 star</span>
      <div class="w-3/4 h-4 mx-2 bg-gray-200 rounded">
        <div class="h-4 bg-yellow-400 rounded" style="width: 10%"></div>
      </div>
      <span class="text-sm font-medium text-gray-500">0%</span>
    </div>
    <div class="flex items-center">
      <span class="text-sm font-medium text-blue-600 hover:underline shrink-0">2 star</span>
      <div class="w-3/4 h-4 mx-2 bg-gray-200 rounded">
        <div class="h-4 bg-yellow-400 rounded" style="width: 5%"></div>
      </div>
      <span class="text-sm font-medium text-gray-500">0%</span>
    </div>
    <div class="flex items-center">
      <span class="text-sm font-medium text-blue-600 hover:underline shrink-0">2 star</span>
      <div class="w-3/4 h-4 mx-2 bg-gray-200 rounded">
        <div class="h-4 bg-yellow-400 rounded" style="width: 10%"></div>
      </div>
      <span class="text-sm font-medium text-gray-500">0%</span>
    </div>
  </div>
</div>

Related Examples

rating system with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.8k
Emoji rating

Brandon D

3 years ago

13.2k
Show total ratings

Piet Vriend

3 years ago

10.8k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
User ratings showcase section

Shakti

3 years ago

9.1k
Super input radio card
card input radio simple input card input design awesome card design rounded black shadow blue border gray icon card radio option HTML CSS select JavaScript dropdown

ROHIT RAJPUT

1 year ago

2.8k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

619
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
Rating stars

Bunny

3 years ago

14.5k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.6k
Rating with text
you also want to show a text near the stars you can use this example as a reference. @zobaidulkazi

zobaidul kaziex

2 years ago

2.2k
Star rating svg buttons
buttons consist of star,star-filled, and star half-filled

Prajwal Hallale

3 years ago

11.4k