Entdecken Sie, wie Sie mit Tailwind CSS mühelos Sternebewertungen implementieren! Diese Kurzanleitung führt Sie durch die Schritte zur schönen Integration von Sternsymbolen in Ihre Webprojekte. Verbessern Sie die Benutzerinteraktion und die Designästhetik mit diesem unkomplizierten Tutorial.
Tailwind CSS Colors Gradient Generator
Um Sternebewertungen mit Tailwind CSS zu verwenden, können Sie eine benutzerdefinierte Komponente erstellen.
<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>
Einfache Sternebewertung mit Heroicons mit 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>
Einfache Rückenwind-Sternebewertung mit tollem 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>
Erstellen Sie eine Sternebewertung in Tailwind CSS mithilfe von HTML-Symbolcodes.
Kostenlose und kostenpflichtige Vorlage für den Tailwind CSS Investment Portfolio Tracker
<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>
Rückenwind-Sternebewertung mit Hover-Effekt.
<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>
Erstellen Sie eine Sternbewertungskarte für Benutzer.
<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>
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Sternebewertung in Tailwind CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Pycharm-Methode zum Suchen von Dateien
Was ist eine NFC-Zugangskontrollkarte?
So lösen Sie das Problem „Berechtigung verweigert'.
Was sind die Kurzvideoplattformen?
Was ist eine unabhängige Direktverbindung?
Was sind die Unterschiede zwischen Weblogic und Tomcat?
Die Rolle des Basis-Tags
So handeln Sie mit VV-Münzen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
