Découvrez comment implémenter le classement par étoiles sans effort à l'aide de Tailwind CSS ! Ce guide rapide vous guide à travers les étapes pour intégrer magnifiquement des icônes d'étoiles dans vos projets Web. Améliorez l'interaction utilisateur et l'esthétique de la conception avec ce didacticiel simple.
Générateur de dégradé de couleurs CSS Tailwind
Pour utiliser les notes par étoiles avec Tailwind CSS, vous pouvez créer un composant personnalisé.
<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>
Classement par étoiles simple à l'aide d'Heroicons avec 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>
Classement simple par étoiles du vent arrière avec une superbe icône.
<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>
Créez un classement par étoiles dans Tailwind CSS à l'aide de codes de symboles HTML.
Modèle de suivi de portefeuille d'investissement Tailwind CSS gratuit et payant
<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>
Classement par étoiles du vent arrière avec effet de survol.
<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>
Créez une carte d'avis étoiles des utilisateurs.
<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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Où se trouve l'entrée de connexion pour la messagerie Gmail ?
Le dernier prix du marché eth
Comment utiliser l'ajout en python
Comment lire une colonne dans Excel en python
Comment fonctionne le capteur de température
Introduction aux méthodes de diagnostic SEO
Que montre l'autre partie après avoir été bloquée sur WeChat ?
Comment acheter et vendre du Bitcoin ? Tutoriel de trading Bitcoin
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
