Componente del forum della community
Un componente del forum della community con uno stile di design retrò/vintage, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente del forum della comunità - Art Déco monocromatico
Un componente reattivo del forum della community progettato con un'estetica Art Déco utilizzando una combinazione di colori monocromatica, adatto per applicazioni tecnologiche/SaaS. Dispone di supporto per la modalità oscura ed elementi interattivi.
Componente del forum della community
Componente del forum della comunità con design del neumorfismo, combinazione di colori in scala di grigi e complessità semplice per i social media utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri.
Componente del forum della community
Un componente del forum della comunità con design Skeuomorphism, combinazione di colori triadica e complessità semplice, per scopi di social media, costruito con Tailwind CSS. Include un design reattivo e il supporto per i temi scuri.