Volet Forum communautaire
Composant du forum communautaire avec conception Neumorphism, schéma de couleurs en niveaux de gris et complexité simple pour les médias sociaux à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-4 antialiased text-gray-800 dark:text-gray-200">
<div class="relative flex flex-col min-w-0 mb-6 break-words bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
<div class="px-6 py-5">
<div class="text-center">
<h3 class="mb-1 text-xl font-bold">Community Forum</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Discuss and share with the community</p>
</div>
</div>
<div class="flex-auto p-6">
<div class="relative w-full">
<input type="text" placeholder="Search topics..." class="px-3 py-3 placeholder-gray-600 dark:placeholder-gray-400 text-gray-800 dark:text-gray-200 relative bg-gray-300 dark:bg-gray-700 rounded text-sm shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark outline-none border-none focus:outline-none focus:shadow-outline w-full pr-10">
<span class="z-10 h-full leading-snug font-normal absolute text-center text-gray-600 dark:text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-3 py-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</span>
</div>
<div class="mt-6">
<div class="flex items-center justify-between mb-4">
<h4 class="text-md font-semibold">Recent Discussions</h4>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">View All</a>
</div>
<ul class="list-none">
<li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
<div>
<p class="text-sm font-semibold">Discussion Topic 1</p>
<span class="text-xs text-gray-600 dark:text-gray-400">Started by John Doe</span>
</div>
</div>
</li>
<li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
<div>
<p class="text-sm font-semibold">Discussion Topic 2</p>
<span class="text-xs text-gray-600 dark:text-gray-400">Started by Jane Smith</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
}
.shadow-neumorphic-dark {
box-shadow: 7px 7px 14px #717171, -7px -7px 14px #8f8f8f;
}
.shadow-neumorphic-input-light {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.shadow-neumorphic-input-dark {
box-shadow: inset 5px 5px 10px #717171, inset -5px -5px 10px #8f8f8f;
}
.shadow-neumorphic-item-light {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-item-dark {
box-shadow: 5px 5px 10px #717171, -5px -5px 10px #8f8f8f;
}
</style>Composants associés
Volet Forum communautaire (Bauhaus du commerce électronique)
Un composant de forum communautaire simple et réactif conçu pour le commerce électronique, avec des formes géométriques inspirées du Bauhaus et une palette de couleurs sourdes. Inclut la prise en charge du mode sombre.
Volet Forum communautaire - Retro Ocean Blue
Un composant de forum communautaire simple et réactif avec une ambiance rétro des années 80/90, conçu pour les plateformes d’emploi et de carrière. Dispose d’une palette de couleurs bleu océan et d’une prise en charge du mode 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.