Rechercher des composants

Catégories

Composants Système d’évaluation

Système d’évaluation

Permet aux utilisateurs d’évaluer le contenu

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.

Ouvrir Aperçu

                <div class="max-w-md mx-auto bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Our Content</h2>
    <div class="flex items-center justify-center mb-6">
        <img src="https://picsum.photos/60/60" alt="Blog Post" class="rounded-full border-2 border-blue-500 mr-3">
        <div>
            <p class="text-lg text-gray-700 dark:text-gray-300">Fantastic Blog Post Title</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Published on January 1, 2023</p>
        </div>
    </div>
    <div class="flex justify-center mb-6">
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-gray-300">★</span>
    </div>
    <textarea class="w-full h-24 p-3 border border-blue-400 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" placeholder="Leave your feedback here..."></textarea>
    <button class="w-full mt-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition duration-300">Submit Rating</button>
    <div class="flex items-center justify-between mt-4 text-gray-700 dark:text-gray-300">
        <span>👍 120 Likes</span>
        <span>💔 5 Dislikes</span>
    </div>
</div>

Composant du système d’évaluation

Un composant de système d’évaluation minimaliste adapté aux sites Web d’entreprise, avec une mise en page réactive et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate Our Service</h2>
    <div class="flex items-center space-x-2 mb-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">John Doe</span>
    </div>
    <div class="flex">
        <span class="text-gray-600 dark:text-gray-400 mr-2">Rating:</span>
        <div class="flex items-center space-x-1">
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
        </div>
    </div>
    <textarea class="w-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md focus:outline-none focus:ring focus:ring-yellow-300 dark:focus:ring-yellow-400" placeholder="Leave your feedback here..."></textarea>
    <button class="mt-4 px-4 py-2 bg-yellow-500 dark:bg-yellow-400 text-white rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-500">Submit</button>
</div>

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.

Ouvrir Aperçu

                <div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4 min-h-screen">
  <div class="w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Rate this item</h2>

    <div class="flex items-center space-x-2 mb-6">
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
        <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.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
        <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.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
        <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.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
        <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.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
        <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.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
    </div>

    <textarea
      class="w-full px-3 py-2 text-gray-700 dark:text-gray-200 border rounded-lg focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-600 dark:border-gray-500"
      rows="4"
      placeholder="Write your review..."
    ></textarea>

    <div class="mt-4 flex justify-end">
      <button
        class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-700"
      >
        Submit
      </button>
    </div>
  </div>
</div>

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 Aperçu

                <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>

Composant du système d’évaluation

Un composant Web réactif pour l’évaluation des éléments avec un design skeuomorphe qui imite ses homologues du monde réel. Convient pour présenter des travaux ou des produits dans un portfolio.

Ouvrir Aperçu

                <div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
    <h2 class="text-xl font-bold mb-4">Rating System</h2>
    <div class="flex items-center mb-6">
        <img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
        <div>
            <h3 class="text-lg font-semibold">Product Name</h3>
            <p class="text-gray-400">Product description goes here.</p>
            <div class="flex items-center mt-2">
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-500">(3/5)</span>
            </div>
        </div>
    </div>
    <h4 class="text-md font-semibold mb-3">User Reviews</h4>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">John Doe</span>
            <span class="text-gray-400 ml-2">5 hours ago</span>
        </div>
        <p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
    </div>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">Jane Smith</span>
            <span class="text-gray-400 ml-2">3 hours ago</span>
        </div>
        <p class="text-gray-300">Not what I expected, but decent quality overall.</p>
    </div>
    <div class="flex items-center justify-between mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
    </div>
</div>