Componenti Recensioni dei prodotti Componente delle recensioni dei prodotti

Componente delle recensioni dei prodotti

Un componente minimalista per le recensioni dei prodotti progettato per le interfacce dei social media, che integra una combinazione di colori triadica ed elementi interattivi.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">John Doe</h3>
            <span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
        </div>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/500/200" alt="Product Image" class="w-full h-32 object-cover rounded-md">
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">This product has exceeded my expectations! The quality is exceptional and it looks great in my living room.</p>
    <div class="flex items-center space-x-4 mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Like</button>
        <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-1 px-2 rounded">Reply</button>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300">Leave a Review</h4>
        <textarea class="w-full border border-gray-300 dark:border-gray-700 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Submit</button>
    </div>
</div>

Componenti correlati

Componente Recensioni dei prodotti di gioco

Un componente giocoso e vivace per le recensioni dei prodotti per i siti Web di gioco, con elementi arrotondati, colori ad alta saturazione e un'interfaccia ricca con valutazioni a stelle, avatar degli utenti, testo delle recensioni e pulsanti Mi piace/Non mi piace. Completamente reattivo con supporto per la modalità oscura.

Aperto