DEV Community

Cover image for How to Use Star Rating in Tailwind CSS
saim
saim

Posted on • Originally published at larainfo.com

How to Use Star Rating in Tailwind CSS

#css #tailwindcss #webdev

Discover how to implement star ratings effortlessly using Tailwind CSS! This quick guide walks you through the steps to beautifully integrate star icons into your web projects. Elevate user interaction and design aesthetics with this straightforward tutorial.

Tailwind CSS Colors Gradient Generator

To use star ratings with Tailwind CSS, you can create a custom component.

<div class="flex items-center">
  <span class="text-yellow-400">★</span>
  <span class="text-yellow-400">★</span>
  <span class="text-yellow-400">★</span>
  <span class="text-gray-300">★</span>
  <span class="text-gray-300">★</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Star Rating custom
Simple star rating using Heroicons with TailwindCSS.

<ul class="flex items-center gap-x-1">
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Star Rating with icon
Simple tailwind star rating with awesome Icon.

<ul class="flex items-center gap-x-1">
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Create a star rating in Tailwind CSS using HTML symbol codes.

Tailwind CSS Investment Portfolio Tracker Free & Paid Template

<div class="flex items-center">
  <!-- 1st Star -->
  <input type="radio" id="star1" name="rating" class="hidden" />
  <label for="star1" class="cursor-pointer text-2xl text-yellow-500">★</label>

  <!-- 2nd Star -->
  <input type="radio" id="star2" name="rating" class="hidden" />
  <label for="star2" class="cursor-pointer text-2xl text-yellow-500">★</label>

  <!-- 3rd Star -->
  <input type="radio" id="star3" name="rating" class="hidden" />
  <label for="star3" class="cursor-pointer text-2xl text-yellow-500">★</label>

  <!-- 4th Star -->
  <input type="radio" id="star4" name="rating" class="hidden" />
  <label for="star4" class="cursor-pointer text-2xl text-yellow-500">★</label>

  <!-- 5th Star -->
  <input type="radio" id="star5" name="rating" class="hidden" />
  <label for="star5" class="cursor-pointer text-2xl text-yellow-500">★</label>
</div>
Enter fullscreen mode Exit fullscreen mode

start rating using html symbol code
Tailwind star rating with hover effect.

<ul class="flex items-center gap-x-1">
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 fill-current hover:text-yellow-400"
      fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
    </svg>
  </li>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 fill-current hover:text-yellow-400"
      fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
    </svg>
  </li>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 hover:text-yellow-400" fill="none"
      viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
    </svg>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Create Users star reviews card.

<div class="max-w-sm px-4 py-4 rounded-lg shadow">
    <div class="px-4 py-4 mb-1 tracking-wide">
        <h2 class="mt-1 font-semibold text-gray-800">106 Users reviews</h2>
        <div class="px-8 pb-3 -mx-8 border-b">
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>5 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-7/12 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">51%</span>
                </div>
            </div>
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>4 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-1/5 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">17%</span>
                </div>
            </div>
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>3 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-3/12 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">19%</span>
                </div>
            </div>
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>2 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-1/5 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">8%</span>
                </div>
            </div>
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>1 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-2/12 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">5%</span>
                </div>
            </div>
        </div>
    </div>
    <div class="w-full px-4">
        <h3 class="font-medium tracking-tight">Review this item</h3>
        <ul class="flex items-center gap-x-1">
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
        </ul>
        <p class="py-1 text-sm text-gray-700">Plz Give your star rating 1 to 5.</p>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Users star reviews card

Top comments (0)

Read next

jospinevans profile image

You don't need to set the time-out

Ndimah Tchougoua -

moh_moh701 profile image

AutoMapper in .NET: When to Use It and When to Avoid It

mohamed Tayel -

brianmmdev profile image

How to build reusable loaders for Remix

Brian Morrison II -

stokry profile image

How to Predict Results of Football Matches

Stokry -