Composant du système d’évaluation
Un composant de système d’évaluation de style glassmorphic adapté aux portfolios présentant des travaux ou des produits, avec un design réactif et une prise en charge du thème sombre.
HTML Code
<div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30 ring-1 ring-gray-300 dark:bg-gray-800 dark:bg-opacity-50 dark:ring-gray-700">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Rate Our Work</h2>
<div class="flex items-center mt-4">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="ml-3 text-gray-700 dark:text-gray-300">John Doe</span>
</div>
<div class="mt-4">
<span class="text-gray-700 dark:text-gray-300">Your Rating:</span>
<div class="flex mt-2">
<label class="flex items-center cursor-pointer">
<input type="radio" name="rating" value="1" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
<label class="flex items-center cursor-pointer ml-1">
<input type="radio" name="rating" value="2" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
<label class="flex items-center cursor-pointer ml-1">
<input type="radio" name="rating" value="3" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
<label class="flex items-center cursor-pointer ml-1">
<input type="radio" name="rating" value="4" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
<label class="flex items-center cursor-pointer ml-1">
<input type="radio" name="rating" value="5" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
</div>
</div>
<div class="flex justify-center mt-4">
<button class="px-4 py-2 text-white font-semibold bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
</div>
<div class="mt-5 flex justify-center dark:text-gray-400">
<img class="w-16 h-16 rounded-full" src="https://picsum.photos/id/1015/200/200" alt="Portfolio Image">
</div>
</div>Composants associés
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.
Composant du système d’évaluation
Un composant de système de notation réactif avec prise en charge du thème sombre, conçu dans un style minimaliste/plat avec une palette de couleurs pastel pour les interfaces de médias sociaux. Il s’agit d’un composant complexe avec de multiples éléments interactifs.