Composants Système d’évaluation Neumorphic_Pastel_Rating_System_Component

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.

Aperçu

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 1

Composants associés

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.

Ouvrir

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.

Ouvrir

Composant du système d’évaluation

Composant du système d’évaluation rétro / vintage pour le commerce électronique avec palette de couleurs complémentaires. Pas besoin de JavaScript, seulement du HTML avec Tailwind CSS.

Ouvrir