Компонент Отзывы о товаре

<div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
    <div class="space-y-4">
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ★</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
    </div>
</div>