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.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg opacity-80 rounded-lg shadow-lg p-6 max-w-lg w-full">
<h1 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h1>
<div class="space-y-4">
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-300">Vivamus laoreet dolor eget lectus tincidunt, et facilisis erat laoreet.</p>
</div>
</div>
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">Alex Johnson</h2>
<p class="text-gray-600 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
</div>
</div>
</div>
<div class="mt-4">
<textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" rows="4" placeholder="Write your message..."></textarea>
<button class="mt-2 w-full bg-blue-500 dark:bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-700 transition">Post Message</button>
</div>
</div>
</div>Componenti correlati
Componente del forum della community
Un componente del forum della community retrò/vintage per l'e-commerce con una combinazione di colori vivaci. Design reattivo con supporto per temi scuri.
Componente del forum della community
Un componente del forum della comunità progettato in stile brutalismo con una combinazione di colori vivaci, adatto per esperienze di e-commerce. Include una varietà di elementi interattivi come post, commenti e profili utente, tutti disegnati con Tailwind CSS per un design reattivo con supporto per temi scuri.
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.