Komponenten Community-Forum Community-Forum-Komponente

Community-Forum-Komponente

Eine Community-Forum-Komponente, die im Brutalismus-Stil mit einem lebendigen Farbschema gestaltet ist und sich für E-Commerce-Erlebnisse eignet. Es enthält eine Vielzahl interaktiver Elemente wie Beiträge, Kommentare und Benutzerprofile, die alle mit Tailwind CSS für ein responsives Design mit Unterstützung für dunkle Themen gestaltet sind.

Vorschau

HTML-Code

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-red-600 dark:text-yellow-300 mb-4">Community Forum</h2>
    <div class="mb-4">
        <input type="text" placeholder="Search..." class="w-full p-2 border border-red-500 dark:border-yellow-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 dark:focus:ring-yellow-300" />
    </div>
    <div class="space-y-6">
        <!-- Forum Post -->
        <div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">John Doe</h3>
                    <span class="text-gray-500 dark:text-gray-400">Posted on 12 Oct 2023</span>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-3">This is a sample forum post discussing the latest trends in e-commerce. Feel free to share your thoughts!</p>
            <div class="flex space-x-4">
                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
                <button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
            </div>
            <div class="mt-4">
                <span class="text-gray-500 dark:text-gray-400">2 Comments</span>
            </div>
        </div>
        <!-- Repeat Forum Post as needed -->
        <div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">Jane Smith</h3>
                    <span class="text-gray-500 dark:text-gray-400">Posted on 10 Oct 2023</span>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-3">Excited about the new sales coming this holiday season! Anyone else?</p>
            <div class="flex space-x-4">
                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
                <button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
            </div>
            <div class="mt-4">
                <span class="text-gray-500 dark:text-gray-400">5 Comments</span>
            </div>
        </div>
    </div>
</div>

Community-Forum-Komponente

Vorschau

HTML-Code

Verwandte Komponenten

Community-Forum-Komponente

Community-Forum Komponente 9

Community-Forum-Komponente