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

665

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