CCHub Logo CCHub Tailwind Collection
Komponenten Bewertungssystem Komponente des Bewertungssystems

Komponente des Bewertungssystems

Eine responsive Webkomponente zum Bewerten von Elementen mit einem skeuomorphen Design, das reale Gegenstücke nachahmt. Geeignet für die Präsentation von Arbeiten oder Produkten in einem Portfolio.

Vorschau

HTML-Code 

<div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
    <h2 class="text-xl font-bold mb-4">Rating System</h2>
    <div class="flex items-center mb-6">
        <img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
        <div>
            <h3 class="text-lg font-semibold">Product Name</h3>
            <p class="text-gray-400">Product description goes here.</p>
            <div class="flex items-center mt-2">
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-500">(3/5)</span>
            </div>
        </div>
    </div>
    <h4 class="text-md font-semibold mb-3">User Reviews</h4>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">John Doe</span>
            <span class="text-gray-400 ml-2">5 hours ago</span>
        </div>
        <p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
    </div>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">Jane Smith</span>
            <span class="text-gray-400 ml-2">3 hours ago</span>
        </div>
        <p class="text-gray-300">Not what I expected, but decent quality overall.</p>
    </div>
    <div class="flex items-center justify-between mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
    </div>
</div>

Verwandte Komponenten

Bauhaus_Music_Rating_System

Eine reaktionsschnelle Musik-/Audiobewertungssystemkomponente mit einem vom Bauhaus inspirierten Design und einem violetten Farbschema in Lila/Violett. Enthält Unterstützung für den Dunkelmodus und interaktive Sternebewertungsfunktionen (nur visuell, kein JS).

Offen

Komponente des Bewertungssystems

Eine minimalistische und flache Design-Bewertungskomponente, die für Dashboard-Anwendungen geeignet ist, mit Juwelentönen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen

Komponente des Bewertungssystems

Eine minimalistische/flache Design-Bewertungssystemkomponente mit komplementärem Farbschema, moderater Komplexität, geeignet für den Konsum von Blogs / Inhalten. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen, die Tailwind CSS-Klassen und kein JavaScript verwenden.

Offen