Komponenten Bewertungssystem Komponente des Bewertungssystems

Komponente des Bewertungssystems

Eine Komponente des Bewertungssystems, die im Retro-/Vintage-Stil gestaltet ist und ein komplementäres Farbschema und eine komplexe Benutzeroberfläche für Blog-Inhalte verwendet. Diese Komponente unterstützt den Dunkelmodus und reagiert mit Tailwind CSS.

Vorschau

HTML-Code

<div class="max-w-md mx-auto bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Our Content</h2>
    <div class="flex items-center justify-center mb-6">
        <img src="https://picsum.photos/60/60" alt="Blog Post" class="rounded-full border-2 border-blue-500 mr-3">
        <div>
            <p class="text-lg text-gray-700 dark:text-gray-300">Fantastic Blog Post Title</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Published on January 1, 2023</p>
        </div>
    </div>
    <div class="flex justify-center mb-6">
        <span class="text-yellow-400"></span>
        <span class="text-yellow-400"></span>
        <span class="text-yellow-400"></span>
        <span class="text-yellow-400"></span>
        <span class="text-gray-300"></span>
    </div>
    <textarea class="w-full h-24 p-3 border border-blue-400 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" placeholder="Leave your feedback here..."></textarea>
    <button class="w-full mt-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition duration-300">Submit Rating</button>
    <div class="flex items-center justify-between mt-4 text-gray-700 dark:text-gray-300">
        <span>👍 120 Likes</span>
        <span>💔 5 Dislikes</span>
    </div>
</div>

Verwandte Komponenten

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.

Offen

Komponente des Bewertungssystems

Bewertungssystemkomponente mit Neumorphism-Stil, responsiven Effekten und Unterstützung für dunkle Themen.

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