Componente del forum della community
Un componente del forum della community reattivo con stile in modalità oscura utilizzando Tailwind CSS. Il componente presenta uno sfondo scuro per ridurre l'affaticamento degli occhi e include immagini segnaposto per avatar e post del forum.
Codice HTML
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg max-w-3xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Community Forum</h2>
<div class="mb-4">
<h3 class="text-xl font-semibold">Latest Discussions</h3>
<div class="mt-4">
<div class="bg-gray-800 p-4 rounded-lg mb-4">
<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 mr-3">
<div>
<h4 class="font-semibold">John Doe</h4>
<span class="text-gray-400 text-sm">2 hours ago</span>
</div>
</div>
<p class="text-gray-300">What are the best practices for learning JavaScript?</p>
<div class="flex justify-between mt-2">
<span class="text-gray-400">5 replies</span>
<span class="text-gray-400">10 likes</span>
</div>
</div>
<div class="bg-gray-800 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="font-semibold">Jane Smith</h4>
<span class="text-gray-400 text-sm">3 hours ago</span>
</div>
</div>
<p class="text-gray-300">Any recommendations for a good code editor?</p>
<div class="flex justify-between mt-2">
<span class="text-gray-400">2 replies</span>
<span class="text-gray-400">5 likes</span>
</div>
</div>
</div>
</div>
<div class="mb-4">
<h3 class="text-xl font-semibold">Join the Conversation</h3>
<form class="mt-4 space-y-4">
<textarea class="w-full p-2 rounded-lg bg-gray-800 text-white placeholder-gray-400 resize-none" rows="4" placeholder="Share your thoughts..."></textarea>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Post</button>
</form>
</div>
<div class="bg-gray-800 p-4 rounded-lg mt-4">
<h3 class="text-xl font-semibold mb-2">Popular Topics</h3>
<ul class="space-y-2">
<li class="bg-gray-700 p-2 rounded">#JavaScript</li>
<li class="bg-gray-700 p-2 rounded">#React</li>
<li class="bg-gray-700 p-2 rounded">#TailwindCSS</li>
<li class="bg-gray-700 p-2 rounded">#NodeJS</li>
<li class="bg-gray-700 p-2 rounded">#WebDevelopment</li>
</ul>
</div>
</div>Componenti correlati
Componente del forum della community
Un componente del forum della community reattivo progettato con i principi del Material Design, adatto per il consumo di blog e contenuti. Presenta un layout a griglia, elementi interattivi e supporta temi scuri utilizzando Tailwind CSS.
Componente del forum della community
Un componente semplice e brutalista del forum della comunità in scala di grigi per i social media, con design reattivo e supporto per la modalità oscura.
Componente del forum della community
Un componente del forum della community progettato con elementi scheumorfici, con design reattivo, supporto per temi scuri e immagini avatar e segnaposto.