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
Forum della comunità Componente 9
Un componente del forum della comunità caratterizzato da un design a vetromorfismo con elementi traslucidi simili al vetro smerigliato, effetti reattivi e supporto per temi scuri.
Componente del forum della community
Un complesso componente del forum della community, ispirato alla carta/stampa, per le discussioni sul meteo e sul clima, che utilizza una combinazione di colori complementari e una reattività completa con il supporto della modalità scura.
Componente del forum della community
Un componente del forum della community reattivo e interattivo con stile di design Neumorphism, adatto per siti Web aziendali/aziendali, che supporta temi chiari e scuri.