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

Feedback-Komponente

Eine reaktionsschnelle Feedback-Komponente, die für Social-Networking-Schnittstellen entwickelt wurde und 3D-Designelemente in einem Graustufen-Farbschema mit Unterstützung für den Dunkelmodus enthält, zugeschnitten auf mittlere Komplexität und Interaktivität.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
            <p class="text-gray-600 dark:text-gray-300">April 10, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        This is an example feedback message where users can share their thoughts about the platform and engage with the community.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>
<div class="max-w-md mx-auto mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another User</h2>
            <p class="text-gray-600 dark:text-gray-300">April 11, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        Feedback is important to shape the experience in a positive direction and enhance user engagement within the social platform.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>

Verwandte Komponenten

Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component

Eine einfache, elegante Feedback-Komponente für Food-/Restaurant-Websites mit einem lebendigen, hochgesättigten Farbschema und Unterstützung für den Dunkelmodus. Entwickelt für Luxus-/Premium-Feeling.

Offen

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

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.

Offen