Community-Forum-Komponente
Eine Community-Forum-Komponente im Retro-/Vintage-Designstil mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.
HTML-Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Community Forum</h2>
<div class="overflow-y-auto h-96">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-100">John Doe</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 5, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-lg">What are your favorite retro games? I miss playing on my old console!</p>
<img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="mt-4 rounded-lg shadow">
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 6, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-lg">I loved Sonic the Hedgehog on Sega! It was the best part of my childhood.</p>
<img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="mt-4 rounded-lg shadow">
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-100">Chris Johnson</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 7, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-lg">Anyone remembers playing Mario Kart? Those were legendary gaming nights!</p>
<img src="https://picsum.photos/400/200?random=3" alt="Random Image" class="mt-4 rounded-lg shadow">
</div>
</div>
<div class="mt-4">
<textarea class="w-full p-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 mb-2" rows="3" placeholder="Join the conversation..."></textarea>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg">Post</button>
</div>
</div>
Verwandte Komponenten
Komponente des Brutalistischen Community-Forums
Eine Community-Forenkomponente im brutalistischen Stil für Social-Media-Schnittstellen mit leuchtenden Farben, moderater Komplexität und Unterstützung für den Dunkelmodus. Enthält eine Liste von Forenbeiträgen mit fetter Typografie, kontrastreichen Elementen und asymmetrischen Layouts, die typisch für brutalistisches Design sind. Enthält Beitragselemente mit Benutzer-Avataren, Interaktionsschaltflächen und eine rohe, absichtlich grobe Ästhetik mit lebendigen Farbakzenten.
Community-Forum-Komponente
Eine Community-Forenkomponente im Neumorphism-Stil für ein Portfolio mit einem pastellfarbenen Farbschema und einem komplexen, responsiven Design mit Unterstützung für dunkle Themen. Es enthält eine Forenliste, aktuelle Aktivitäten und Benutzerprofile, die alle mit Tailwind CSS ohne JavaScript implementiert wurden.
Community-Forum-Komponente
Community-Forum-Komponente mit Neumorphism-Design, Graustufen-Farbschema und einfacher Komplexität für Social Media mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen.