CCHub Logo CCHub Tailwind Collection
Komponenten Bewertungssystem Komponente des Bewertungssystems

Komponente des Bewertungssystems

Eine reaktionsschnelle Bewertungssystemkomponente, die im Brutalismus-Stil mit Tailwind CSS entworfen wurde. Es unterstützt ein dunkles Thema und hat einen hohen Kontrast mit einem rohen und fetten Design.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Rate Us!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Your feedback is valuable to us!</p>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Random User" class="rounded-full border-2 border-gray-800 dark:border-white">
        <span class="ml-3 text-lg text-gray-800 dark:text-white">User Name</span>
    </div>
    <div class="flex justify-center">
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
    </div>
    <div class="mt-4">
        <button class="w-full bg-gray-800 dark:bg-yellow-400 text-white py-2 rounded-md font-bold hover:bg-yellow-500 transition duration-200">Submit Rating</button>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark:hover\:bg-yellow-500:hover {
            background-color: #bb8d29;
        }
    }
</style>

Verwandte Komponenten

Komponente des Bewertungssystems

Eine saubere, minimalistische Bewertungssystemkomponente mit einem Bonbon-/Süßigkeits-Farbschema, das für Wetter-/Klimadaten entwickelt wurde. Es verwendet ein Rastersystem und betont die Typografie mit voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Komponente des Bewertungssystems

Eine reaktionsschnelle Bewertungssystemkomponente mit Unterstützung für dunkle Themen, die in einem minimalistischen/flachen Stil mit einem pastellfarbenen Farbschema für Social-Media-Schnittstellen gestaltet ist. Es handelt sich um eine komplexe Komponente mit mehreren interaktiven Elementen.

Offen

Komponente des Bewertungssystems

Eine komplexe Bewertungssystemkomponente für den E-Commerce mit minimalistischem/flachem Design, Graustufen-Farbschema, responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript. Verwendet picsum.photos und randomuser.me für Bilder und Avatare.

Offen