CCHub Logo CCHub Tailwind Collection
Komponenten Feedback-Komponenten Feedback-Komponente

Feedback-Komponente

Eine reaktionsschnelle Feedback-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde, Erdtöne enthält und für die Unterstützung des Dunkelmodus ausgestattet ist. Diese Komponente wurde speziell für Dashboards entwickelt und verfügt über verschiedene interaktive Elemente.

Vorschau

HTML-Code 

<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">User Feedback</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Feedback Item -->
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">"The new dashboard layout is intuitive and allows for quick access to data. I really appreciate the improvements!"</p>
            <div class="mt-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
                <span class="text-yellow-500 font-bold">⭐⭐⭐⭐⭐</span>
            </div>
        </div>
        <!-- Feedback Item -->
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">"Great features! However, I would like to see more customization options for the charts."</p>
            <div class="mt-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
                <span class="text-yellow-500 font-bold">⭐⭐⭐⭐</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-500" rows="4" placeholder="Leave your feedback here..."></textarea>
    </div>
    <button class="mt-4 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Submit Feedback</button>
</div>

Verwandte Komponenten

Feedback-Komponente 23

Eine Feedback-Komponente im Material Design-Stil mit responsiven Animationen und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.

Offen

Komponente "Feedback-Komponenten"

Eine minimalistische Feedback-Komponente, die für den E-Commerce entwickelt wurde, mit sanften Pastellfarben, responsivem Design und Unterstützung für dunkle Themen. Die Komponente enthält ein Feedback-Formular mit Eingabefeldern, ein Bewertungssystem und einen Senden-Button, die alle mit Tailwind CSS gestaltet sind.

Offen

Feedback-Komponente

Eine reaktionsschnelle Feedback-Komponente, die Mikrointeraktionen mit ansprechenden Animationen verbindet. Es wurde entwickelt, um den Dunkelmodus zu unterstützen und verfügt über Elemente für Benutzerfeedback mit Platzhalterbildern und Avataren.

Offen