Volet Forum communautaire
Un composant de forum communautaire réactif conçu selon les principes de Material Design, adapté à la consommation de blogs et de contenu. Il dispose d’une disposition en grille, d’éléments interactifs et prend en charge les thèmes sombres à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/100" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Understanding Material Design</h2>
<p class="text-gray-600 dark:text-gray-300">This post discusses the key principles of Material Design and how to implement them effectively using Tailwind CSS.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/101" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Tailwind CSS for Beginners</h2>
<p class="text-gray-600 dark:text-gray-300">A beginner's guide to Tailwind CSS, exploring its utility-first approach and customization options.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/102" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Michael Johnson</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Accessibility in Design</h2>
<p class="text-gray-600 dark:text-gray-300">Exploring the importance of accessibility in design and how to ensure your designs are inclusive.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/103" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Emily Davis</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Responsive Web Design</h2>
<p class="text-gray-600 dark:text-gray-300">Learn how to create responsive web designs that adapt to different screen sizes and devices.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
</div>
</div>Composants associés
Volet Forum communautaire
Il s’agit d’un composant simple de forum communautaire utilisant les principes de conception matérielle, conçu pour la consommation de contenu de blog avec une palette de couleurs Earth Tones et une conception réactive pour la prise en charge du mode sombre.
Volet Forum communautaire
Un composant de forum communautaire réactif conçu selon les principes de Material Design à l’aide de Tailwind CSS, avec la prise en charge des thèmes sombres et des images de remplacement.
Volet Forum communautaire
Il s’agit d’un composant de forum communautaire complexe, réactif et conçu par Skeuomorphism pour le commerce électronique avec une palette de couleurs en niveaux de gris, une prise en charge du thème sombre et aucun JavaScript. Utilise Tailwind CSS et des images/avatars factices.