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
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.
Composant du système d’évaluation brutaliste
Un composant de système de notation réactif conçu dans un style brutaliste à l’aide de Tailwind CSS, avec prise en charge du thème sombre.