Composants Avis sur les produits Composant Avis sur les produits

Composant Avis sur les produits

Un composant d’avis sur les produits conçu dans le style brutalisme, avec un contraste élevé, un design réactif et une prise en charge du thème sombre. Il comprend des avatars d’utilisateurs et des images de produits provenant de services d’espace réservé.

Aperçu

HTML Code

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Product Reviews</h2>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                <p class="text-gray-700 dark:text-gray-300">This product is amazing! It exceeded my expectations and I would highly recommend it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=1" alt="Product Image">
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Jane Smith</h3>
                <p class="text-gray-700 dark:text-gray-300">I didn't like this product. It was not what I expected and I had some issues with it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=2" alt="Product Image"> 
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Michael Lee</h3>
                <p class="text-gray-700 dark:text-gray-300">Great quality and fast shipping! Will purchase again.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=3" alt="Product Image">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800">Submit Your Review</button>
</div>

Composants associés

Composant Avis sur les produits

Un composant d’avis sur les produits simple et réactif avec une esthétique de conception 3D, une palette de couleurs noir et blanc avec un accent vif, conçu pour les outils CRM/Business, y compris la prise en charge du mode sombre.

Ouvrir

Neumorphic Avis sur les produits Composant

Un composant d’avis sur les produits simple et réactif avec un design neumorphique, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux sites Web d’entreprise ou d’entreprise.

Ouvrir

Composant - Tons de bijoux ludiques avec accent sur la réservation

Un élément complexe et ludique d’évaluation de produits axé sur la réservation. Dispose de couleurs de tons de bijoux, d’éléments arrondis et d’une réactivité totale avec prise en charge du mode sombre.

Ouvrir