CCHub Logo CCHub Tailwind Collection
Komponenten Community-Forum Community-Forum-Komponente

Community-Forum-Komponente

Eine reaktionsschnelle Community-Forum-Komponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS entwickelt wurde, mit Unterstützung für dunkle Designs und Platzhalterbildern.

Vorschau

HTML-Code 

<div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">This is a great place to discuss various topics and share ideas with others. Feel free to start a conversation!</p>
            <img src="https://picsum.photos/400/200" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 1, 2023</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the community here! Everyone is so friendly and welcoming. Looking forward to more discussions.</p>
            <img src="https://picsum.photos/400/201" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 2, 2023</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Join the Conversation</h4>
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="Share your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

Verwandte Komponenten

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.

Offen

Community-Forum-Komponente

Eine einfache Community-Forenkomponente mit einem pastellfarbenen Farbschema, Material Design-Einflüssen und Unterstützung für den Dunkelmodus. Verfügt über ein responsives Layout für den Konsum von Blogs / Inhalten.

Offen

Community-Forum-Komponente

Eine reaktionsschnelle Community-Forum-Komponente, die im Glassmorphism-Stil mit Erdtönen gestaltet ist und für Social-Media-Plattformen geeignet ist. Es verfügt über einen Milchglaseffekt und ist mit dem Dunkelmodus kompatibel.

Offen