Neumorphic_Pastel_Rating_System_Component
Un composant de système d’évaluation neumorphique simple et réactif avec une palette de couleurs pastel, adapté aux sites Web de voyage et de tourisme, y compris la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="w-full max-w-sm p-6 rounded-3xl bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
<h2 class="text-center text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-6">
Rate Your Experience
</h2>
<div class="flex justify-center space-x-3 md:space-x-4 mb-6">
<!-- Star 1 -->
<button class="w-12 h-12 md:w-16 md:h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group focus:outline-none transition-all duration-300 ease-in-out
shadow-neumorphic-light-btn hover:shadow-neumorphic-light-btn-hover dark:shadow-neumorphic-dark-btn dark:hover:shadow-neumorphic-dark-btn-hover">
<svg class="w-7 h-7 md:w-9 md:h-9 text-purple-300 dark:text-purple-600 group-hover:text-amber-400 transform transition-transform duration-200 ease-in-out group-hover:scale-110" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81L14.28 9.539a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.906-2.108a1 1 0 00-1.154 0L6.26 15.067c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</button>
<!-- Star 2 -->
<button class="w-12 h-12 md:w-16 md:h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group focus:outline-none transition-all duration-300 ease-in-out
shadow-neumorphic-light-btn hover:shadow-neumorphic-light-btn-hover dark:shadow-neumorphic-dark-btn dark:hover:shadow-neumorphic-dark-btn-hover">
<svg class="w-7 h-7 md:w-9 md:h-9 text-blue-300 dark:text-blue-600 group-hover:text-amber-400 transform transition-transform duration-200 ease-in-out group-hover:scale-110" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81L14.28 9.539a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.906-2.108a1 1 0 00-1.154 0L6.26 15.067c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1Composants associés
Composant du système d’évaluation 24
Un composant de système de classification conçu en 3D qui prend en charge les thèmes sombres et les effets réactifs. Ce composant comporte des étoiles pour les notes, les avatars des utilisateurs et une section de commentaires.
Composant du système d’évaluation
Un composant du système d’évaluation conçu dans un style rétro/vintage, utilisant une palette de couleurs complémentaires et une interface complexe pour le contenu du blog. Ce composant prend en charge le mode sombre et est réactif à l’aide de Tailwind CSS.
Composant du système d’évaluation
Un composant de système d’évaluation réactif conçu dans un style Brutalism à l’aide de Tailwind CSS. Il prend en charge le thème sombre et a un contraste élevé avec un design brut et audacieux.