CCHub Logo CCHub Tailwind Collection
Komponenten Bewertungssystem Bewertungssystem Komponente 24

Bewertungssystem Komponente 24

Eine 3D-entworfene Bewertungssystemkomponente, die dunkle Themen und reaktionsschnelle Effekte unterstützt. Diese Komponente verfügt über Sterne für Bewertungen, Benutzer-Avatare und einen Kommentarbereich.

Vorschau

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>

Verwandte Komponenten

Komponente des Bewertungssystems

Eine Bewertungssystemkomponente im glassmorphic-Stil, die für Portfolios geeignet ist, in denen Arbeiten oder Produkte präsentiert werden, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

Komponente des Retro-Rating-Systems

Eine einfache Bewertungssystemkomponente im Retro-Stil für den E-Commerce mit leuchtenden Farben und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Komponente des brutalistischen Bewertungssystems

Eine reaktionsschnelle Bewertungssystem-Komponente, die im Brutalismus-Stil unter Verwendung von Tailwind CSS mit Unterstützung für dunkle Themen entwickelt wurde.

Offen