Volet Forum communautaire
Un composant de forum communautaire de style Neumorphism pour un portfolio, avec une palette de couleurs pastel et un design complexe et réactif avec prise en charge du thème sombre. Il comprend une liste de forums, l’activité récente et les profils d’utilisateurs, tous mis en œuvre à l’aide de Tailwind CSS sans JavaScript.
HTML Code
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans">
<div class="container mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Sidebar: Forum Categories/List -->
<div class="lg:col-span-1 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Forum Categories</h2>
<ul>
<li class="mb-4">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
<span class="w-2 h-2 rounded-full bg-blue-400 mr-3"></span> General Discussion
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
<span class="w-2 h-2 rounded-full bg-green-400 mr-3"></span> Project Feedback
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
<span class="w-2 h-2 rounded-full bg-purple-400 mr-3"></span> Tech Talk
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
<span class="w-2 h-2 rounded-full bg-red-400 mr-3"></span> Off-Topic
</a>
</li>
</ul>
</div>
<!-- Main Content: Forum Threads -->
<div class="lg:col-span-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Recent Threads</h2>
<!-- Thread Card 1 -->
<div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full border-2 border-blue-300 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Help needed with Neumorphism shadows</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<span class="mr-4">Posted by <span class="font-semibold text-blue-500 dark:text-blue-400">John Doe</span></span>
<span>2 hours ago</span>
<span class="ml-auto flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
15
</span>
</div>
</div>
</div>
<!-- Thread Card 2 -->
<div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full border-2 border-pink-300 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Ideas for a portfolio redesign?</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<span class="mr-4">Posted by <span class="font-semibold text-pink-500 dark:text-pink-400">Jane Smith</span></span>
<span>5 hours ago</span>
<span class="ml-auto flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
27
</span>
</div>
</div>
</div>
<!-- Thread Card 3 -->
<div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full border-2 border-green-300 dark:border-green-500" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Best practices for responsive typography?</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<span class="mr-4">Posted by <span class="font-semibold text-green-500 dark:text-green-400">Alice Johnson</span></span>
<span>Yesterday</span>
<span class="ml-auto flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
12
</span>
</div>
</div>
</div>
<button class="w-full py-3 mt-4 rounded-lg bg-blue-400 dark:bg-blue-600 text-white font-semibold shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark transition duration-300">
Load More Threads
</button>
</div>
</div>
</div>
<style>
/* Neumorphic Shadows - Light Mode */
.shadow-neumorphic-light {
box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
}
.shadow-neumorphic-flat-light {
box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}
.shadow-neumorphic-pressed-light {
box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}
/* Neumorphic Shadows - Dark Mode */
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 15px #4a4a4a, -8px -8px 15px #2c2c2c;
}
.dark .shadow-neumorphic-flat-dark {
box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #2c2c2c;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
}
.dark .shadow-neumorphic-pressed-dark {
box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
}
/* Pastel Colors for Light Mode */
.bg-gray-200 { background-color: #e0e5ec; } /* Light background */
.bg-gray-300 { background-color: #dae0e8; } /* Slightly darker accent */
.text-gray-700 { color: #5c6a7e; }
.text-gray-600 { color: #7f8fa5; }
.text-blue-400 { color: #87ceeb; } /* Sky Blue */
.text-green-400 { color: #98fb98; } /* Pale Green */
.text-purple-400 { color: #dda0dd; } /* Plum */
.text-red-400 { color: #f08080; } /* Light Coral */
.border-blue-300 { border-color: #a7d9f7; }
.border-pink-300 { border-color: #f7a7d9; }
.border-green-300 { border-color: #b3f7a7; }
/* Pastel Colors for Dark Mode */
.dark\:bg-gray-800 { background-color: #2c2c2c; }
.dark\:bg-gray-700 { background-color: #3a3a3a; }
.dark\:bg-gray-600 { background-color: #4a4a4a; }
.dark\:text-gray-200 { color: #e0e0e0; }
.dark\:text-gray-300 { color: #c0c0c0; }
.dark\:text-gray-400 { color: #a0a0a0; }
.dark\:text-gray-100 { color: #f0f0f0; }
.dark\:text-blue-600 { color: #6495ed; } /* Cornflower Blue */
.dark\:text-pink-600 { color: #ff69b4; } /* Hot Pink */
.dark\:text-green-600 { color: #3cb371; } /* Medium Sea Green */
.dark\:border-blue-500 { border-color: #4682b4; }
.dark\:border-pink-500 { border-color: #c71585; }
.dark\:border-green-500 { border-color: #2e8b57; }
.dark\:focus\:ring-blue-500 { --tw-ring-color: #6495ed; }
</style>
<script>
// You can toggle dark mode with a simple script if needed,
// for example, by adding/removing the "dark" class to the root element.
// This example assumes a mechanism for dark mode toggling is already in place or will be added externally.
</script>Composants associés
Volet Forum communautaire
Un composant de forum communautaire réactif conçu avec un style Skeuomorphism et un schéma de couleurs sourdes/désaturées, adapté aux sites Web gouvernementaux/publics, y compris la prise en charge du mode sombre.
Composante Forum Communauté - Glassmorphism E-commerce
Un composant de forum communautaire de style glassmorphism pour le commerce électronique, avec des éléments translucides, des effets de flou et une palette de couleurs triadique. Réactif avec prise en charge du mode sombre.
Volet Forum communautaire
Un composant simple de forum de la communauté Neumorphic pour le commerce électronique, utilisant une palette de couleurs triadique, avec un design réactif et une prise en charge du thème sombre.