Componente del forum della community
Un componente reattivo del forum della comunità progettato in stile Glassmorphism con toni della Terra, adatto per le piattaforme di social media. Presenta un effetto vetro smerigliato ed è compatibile con la modalità scura.
Codice HTML
<div class="min-h-screen bg-gray-800 flex flex-col items-center justify-center p-10">
<div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-3xl w-full">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
<div class="space-y-4">
<!-- Post Example -->
<div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">2 hours ago</span>
</div>
</div>
<p class="mt-2 text-gray-800 dark:text-gray-200">What do you all think about the latest trends in technology?</p>
</div>
<!-- Post Example -->
<div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
</div>
</div>
<p class="mt-2 text-gray-800 dark:text-gray-200">I believe we are on the cusp of major changes in this field!</p>
</div>
</div>
<div class="mt-6">
<textarea class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-20 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" rows="3" placeholder="Share your thoughts..."></textarea>
<button class="mt-2 w-full py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Post</button>
</div>
</div>
</div>Componenti correlati
Componente del forum della community
Componente del forum della comunità con design Glassmorphism, combinazione di colori vibranti, livello di complessità complesso, per scopi di blog/contenuti, design reattivo con supporto per temi scuri, utilizzando Tailwind CSS.
Componente del forum della community
Un componente reattivo del forum della comunità per la finanza/banche con uno stile Material Design e una combinazione di colori caramelle/dolci, con colori vivaci come il rosa bubblegum e il verde menta, il supporto della modalità scura e l'HTML semantico.
Componente del forum della community
Un componente semplice e reattivo del forum della community con una combinazione di colori caldi e ispirati al tramonto, adatto per piattaforme di appuntamenti o social. Presenta ombre simili al Material Design e include il supporto per la modalità oscura.