Rating System Component 24
A 3D designed rating system component that supports dark theme and responsive effects. This component features stars for ratings, user avatars, and a comments section.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full shadow-md border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
</div>
</div>
<div class="flex mt-4 space-x-1">
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
</div>
<div class="mt-4">
<p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
<img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
</div>
</div>Related Components
Rating System Component
A complex, retro-themed rating system component for social media, featuring a monochromatic color scheme. It's fully responsive and supports a dark mode. This component uses only HTML and Tailwind CSS, with no JavaScript.
Brutalism_Travel_Rating_System
A simple, brutalist-style rating system component for travel and tourism websites, featuring cool neutrals and dark mode support.
Monospace_Developer_Autumn_Rating_System_Component
A complex, monospace-inspired rating system component with autumn colors for industrial and manufacturing applications. Features clean design, multiple interactive elements, full responsiveness, and dark mode support.