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
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.
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.