Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > How to Use Star Rating in Tailwind CSS

How to Use Star Rating in Tailwind CSS

王林
Release： 2024-07-25 04:46:33
Original
1104 people have browsed it

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>
Copy after login

How to Use Star Rating in Tailwind CSS
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>
Copy after login

How to Use Star Rating in Tailwind CSS
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>
Copy after login

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>
Copy after login

How to Use Star Rating in Tailwind CSS
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>
Copy after login

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>
Copy after login

How to Use Star Rating in Tailwind CSS

The above is the detailed content of How to Use Star Rating in Tailwind CSS. For more information, please follow other related articles on the PHP Chinese website!

source：dev.to
Previous article：Mastering Local Storage in Web Development Next article：Bulma CSS: A Modern CSS Framework for Responsive Design
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2282
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2416
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2032
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1917
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1991
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template