Volet Forum communautaire
Composant de forum communautaire conçu avec des éléments skeuomorphes, avec un design réactif, la prise en charge du thème sombre et des images d’avatar et d’espace réservé.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
<div class="border-b border-gray-300 dark:border-gray-600 mb-4 pb-2">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Latest Discussions</h2>
</div>
<div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">What’s the best way to learn Tailwind CSS?</p>
<span class="text-gray-500 dark:text-gray-300 text-sm">5 comments - 2 hours ago</span>
</div>
</div>
<div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">Can someone explain the flexbox model?</p>
<span class="text-gray-500 dark:text-gray-300 text-sm">3 comments - 1 hour ago</span>
</div>
</div>
<div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Mark Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">Tailwind vs Bootstrap: Which one to choose?</p>
<span class="text-gray-500 dark:text-gray-300 text-sm">8 comments - 30 minutes ago</span>
</div>
</div>
<div class="mt-6">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join the discussion!</h2>
<textarea class="mt-2 w-full h-24 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Type your message here..."></textarea>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 transition-all">Post</button>
</div>
</div>Composants associés
Volet Forum communautaire
Il s’agit d’un composant simple du forum communautaire avec une palette de couleurs pastel, des influences Material Design et la prise en charge du mode sombre. Dispose d’une mise en page réactive pour la consommation de blog/contenu.
Volet Forum communautaire
Un composant de forum communautaire conçu dans le style brutalisme avec une palette de couleurs vives, adapté aux expériences de commerce électronique. Il comprend une variété d’éléments interactifs tels que des publications, des commentaires et des profils d’utilisateurs, tous stylisés avec Tailwind CSS pour un design réactif avec prise en charge du thème sombre.
Volet Forum communautaire
Un composant de forum communautaire rétro/vintage pour le commerce électronique avec une palette de couleurs vives. Conception réactive avec prise en charge du thème sombre.