Home
Quentin Rivers
User review form

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 CSS v3. It is responsive. similar terms for this example is Vote

Rating

Author Quentin Rivers

2.6k

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 Form with stars and message
tailwindcss

Author:
Prashant Saini

7 months ago

494
Show total ratings

Author:
Piet Vriend

3 years ago

10.4k
Heart Shaped Rating Section

Author:
Gopi Yadav

3 years ago

13.2k
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

Author:
ROHIT RAJPUT

1 year ago

1.8k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

8 months ago

1.1k
Product rating section
display star rating stats with user avatars

Author:
Erik Hyatt

2 years ago

11.5k
User ratings showcase section

Author:
Shakti

2 years ago

8.5k
Emoji rating

Author:
Brandon D

3 years ago

12.6k
Card
travel place card hover effect card

Author:
nahid hasan

11 months ago

1.9k
rating system with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

Author:
Ayman Reifoun

9 months ago

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

Author:
zobaidul kaziex

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components