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
Un composant de forum communautaire réactif et interactif avec le style de conception Neumorphism, adapté aux sites Web d’entreprise/d’entreprise, prenant en charge les thèmes clairs et sombres.
Volet Forum communautaire
Composant du forum communautaire avec conception Glassmorphism, palette de couleurs vives, niveau de complexité complexe, à des fins de blog/contenu, conception réactive avec prise en charge du thème sombre, utilisation de Tailwind CSS.
Volet Forum communautaire
Un composant simple de forum communautaire sur le thème cyberpunk pour les plateformes immobilières, avec des arrière-plans sombres, des accents néon et un design réactif avec prise en charge du mode sombre.