Componente del forum della community
Un semplice componente del forum della comunità neumorfica per l'e-commerce, che utilizza una combinazione di colori triadica, con design reattivo e supporto per temi scuri.
Codice HTML
<div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-md w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Community Forum</h2>
<div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<p class="font-medium text-gray-700 dark:text-gray-300">John Doe</p>
</div>
<p class="text-gray-600 dark:text-gray-400">"Looking for recommendations on the best ergonomic mouse for gaming!"</p>
<div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
<span>2 hours ago</span>
<button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
</div>
</div>
<div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<p class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</p>
</div>
<p class="text-gray-600 dark:text-gray-400">"Just received my order, the quality is amazing! Highly recommend this store."</p>
<div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
<span>1 day ago</span>
<button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
</div>
</div>
<div class="mt-6">
<button class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white py-2 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark transition duration-300">
View More Posts
</button>
</div>
</div>
</div>
<style>
/* Neumorphism shadows - light mode */
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
}
/* Neumorphism shadows - dark mode */
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #333333, -6px -6px 12px #555555;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
}
/* Triadic color scheme roughly used with blue for accent */
/* Main background/base: gray (adjusting with neumorphism) */
/* Accent 1: blue (for buttons/links) */
/* Accent 2 & 3 would naturally emerge from interactions/hover states or subtle text colors */
</style>
Componenti correlati
Componente del forum della community
Un componente reattivo del forum della comunità progettato con uno stile Skeuomorphism e una combinazione di colori tenui/desaturati, adatto per siti Web governativi/pubblici, incluso il supporto della modalità oscura.
Componente del forum della community
Componente del forum della comunità con design del neumorfismo, combinazione di colori in scala di grigi e complessità semplice per i social media utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri.
Componente del forum della community
Componente del forum della comunità con design Glassmorphism, combinazione di colori vibranti, livello di complessità complesso, per scopi di blog/contenuti, design reattivo con supporto per temi scuri, utilizzando Tailwind CSS.