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
Un composant minimaliste de forum communautaire pour le commerce électronique, avec un design épuré, une palette de couleurs triadique et une prise en charge du mode sombre.
Composante du Forum communautaire brutaliste
Un composant de forum communautaire de style brutaliste pour les interfaces de médias sociaux avec des couleurs vives, une complexité modérée et une prise en charge du mode sombre. Comprend une liste de messages sur le forum avec une typographie audacieuse, des éléments très contrastés et des mises en page asymétriques typiques du design brutaliste. Comprend des articles de publication avec des avatars d’utilisateurs, des boutons d’interaction et une esthétique brute et intentionnellement grossière avec des accents de couleurs vives.
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.