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

Community-Forum-Komponente

Eine Community-Forum-Komponente, die mit skeuomorphen Elementen gestaltet wurde, mit responsivem Design, Unterstützung für dunkle Themen sowie Avatar- und Platzhalterbildern.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
    <div class="border-b border-gray-300 dark:border-gray-600 mb-4 pb-2">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Latest Discussions</h2>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">What’s the best way to learn Tailwind CSS?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">5 comments - 2 hours ago</span>
        </div>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
            <p class="text-gray-600 dark:text-gray-400">Can someone explain the flexbox model?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">3 comments - 1 hour ago</span>
        </div>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Mark Johnson</h3>
            <p class="text-gray-600 dark:text-gray-400">Tailwind vs Bootstrap: Which one to choose?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">8 comments - 30 minutes ago</span>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join the discussion!</h2>
        <textarea class="mt-2 w-full h-24 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Type your message here..."></textarea>
        <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 transition-all">Post</button>
    </div>
</div>

Verwandte Komponenten

Community-Forum-Komponente

Eine reaktionsschnelle Community-Forum-Komponente, die im Dunkelmodus mit Tailwind CSS formatiert ist. Die Komponente verfügt über einen dunklen Hintergrund, um die Belastung der Augen zu reduzieren, und enthält Platzhalterbilder für Avatare und Forenbeiträge.

Offen

Community-Forum-Komponente

Eine Community-Forum-Komponente mit Skeuomorphismus-Design, triadischem Farbschema und einfacher Komplexität für Social-Media-Zwecke, erstellt mit Tailwind CSS. Beinhaltet Responsive Design und Unterstützung für dunkle Themen.

Offen

Community-Forum-Komponente (E-Commerce Bauhaus)

Eine einfache, reaktionsschnelle Community-Foren-Komponente, die für den E-Commerce entwickelt wurde, mit vom Bauhaus inspirierten geometrischen Formen und einer gedämpften Farbpalette. Enthält Unterstützung für den Dunkelmodus.

Offen