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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-sans transition-colors duration-300">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<header class="flex items-center justify-between mb-8 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden">
<div class="absolute inset-0 bg-noise opacity-5"></div>
<h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-200 text-shadow-md z-10">Community Forum</h1>
<div class="flex items-center space-x-4 z-10">
<input type="text" placeholder="Search..." class="px-5 py-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-300 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400 w-64">
<button class="p-3 bg-gray-500 dark:bg-gray-600 rounded-full shadow-lg border border-gray-600 dark:border-gray-500 hover:bg-gray-600 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
<span class="block w-6 h-6 bg-center bg-no-repeat bg-contain icon-plus group-hover:rotate-90 transition-transform duration-300"></span>
<div class="absolute inset-0 bg-noise opacity-10"></div>
</button>
</div>
</header>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Left Sidebar - Categories/Navigation -->
<aside class="lg:col-span-1 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-slide-in-left">
<div class="absolute inset-0 bg-noise opacity-5"></div>
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Categories</h2>
<ul class="space-y-4 z-10">
<li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shopping-cart group-hover:scale-110 transition-transform duration-200"></span>
<span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Product Support</span>
</li>
<li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shipping group-hover:scale-110 transition-transform duration-200"></span>
<span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Order & Shipping</span>
</li>
<li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-returns group-hover:scale-110 transition-transform duration-200"></span>
<span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Returns & Refunds</span>
</li>
<li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-faq group-hover:scale-110 transition-transform duration-200"></span>
<span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">General Inquiries</span>
</li>
</ul>
<div class="mt-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Popular Topics</h2>
<ul class="space-y-3 z-10">
<li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
<span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
<span>Troubleshooting your new gadget</span>
</li>
<li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
<span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
<span>What's the best delivery option?</span>
</li>
<li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
<span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
<span>Extended warranty details</span>
</li>
</ul>
</div>
</aside>
<!-- Main Forum Content -->
<main class="lg:col-span-3 space-y-8">
<!-- Featured/Pinned Threads -->
<section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up">
<div class="absolute inset-0 bg-noise opacity-5"></div>
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Featured Discussions</h2>
<div class="space-y-4 z-10">
<div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
<div class="flex items-center space-x-4">
<span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Announcement: Holiday Shipping Deadlines 2024</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted by Admin on Nov 15, 2024</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
<span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
<span>120 replies</span>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
<div class="flex items-center space-x-4">
<span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">New Product Line Q1 2025 Sneak Peek!</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted by Marketing Team on Dec 1, 2024</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
<span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
<span>250 replies</span>
</div>
</div>
</div>
</section>
<!-- Recent Threads -->
<section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up delay-100">
<div class="absolute inset-0 bg-noise opacity-5"></div>
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Recent Activity</h2>
<div class="space-y-4 z-10">
<!-- Thread Item 1 -->
<div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
<div class="flex items-start sm:items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
<div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Issue with my recent order - missing item</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JaneDoe</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Order & Shipping</span></p>
</div>
</div>
<div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
<div class="flex items-center space-x-1">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
<span>5 replies</span>
</div>
<div class="flex items-center space-x-1">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
<span>120 views</span>
</div>
<span class="text-sm">2 hours ago</span>
</div>
</div>
<!-- Thread Item 2 -->
<div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
<div class="flex items-start sm:items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
<div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Question about product compatibility</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JohnDoh</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Product Support</span></p>
</div>
</div>
<div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
<div class="flex items-center space-x-1">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
<span>10 replies</span>
</div>
<div class="flex items-center space-x-1">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
<span>250 views</span>
</div>
<span class="text-sm">1 day ago</span>
</div>
</div>
<!-- Thread Item 3 -->
<div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
<div class="flex items-start sm:items-center space-x-4">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
<div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">General feedback on website usability</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">BotUser</span> in <span class="font-medium text-gray-700 dark:text-gray-300">General Inquiries</span></p>
</div>
</div>
<div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
<div class="flex items-center space-x-1">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
<span>2 replies</span>
</div>
<div class="flex items-center space-x-1">
<span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
<span>50 views</span>
</div>
<span class="text-sm">3 days ago</span>
</div>
</div>
</div>
<!-- Pagination -->
<div class="mt-8 flex justify-center space-x-4 z-10">
<button class="px-6 py-3 bg-gray-400 dark:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-full shadow-lg border border-gray-500 dark:border-gray-500 hover:bg-gray-500 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
<span class="absolute inset-0 bg-noise opacity-10"></span>
<span class="z-10 relative">Previous</span>
</button>
<button class="px-6 py-3 bg-gray-600 dark:bg-gray-500 text-white dark:text-gray-900 rounded-full shadow-lg border border-gray-700 dark:border-gray-400 hover:bg-gray-700 dark:hover:bg-gray-400 transition-all duration-200 group relative overflow-hidden">
<span class="absolute inset-0 bg-noise opacity-10"></span>
<span class="z-10 relative">Next</span>
</button>
</div>
</section>
</main>
</div>
<!-- Footer -->
<footer class="mt-12 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 text-center text-gray-700 dark:text-gray-300 relative overflow-hidden animate-fade-in-up delay-200">
<div class="absolute inset-0 bg-noise opacity-5"></div>
<p class="z-10 relative">© 2024 E-commerce Community Forum. All rights reserved.</p>
<div class="flex justify-center space-x-4 mt-4 z-10 relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Privacy Policy</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Terms of Service</a>
</div>
</footer>
</div>
</div>
<style>
/* Base styles for Skeuomorphism - mimic physical depth */
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); }
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
.text-shadow-md { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
.text-shadow-sm { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
/* Custom noise background for texture */
.bg-noise {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZSIgeD1Composants associés
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 (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
Composant du forum communautaire avec conception Glassmorphism, palette de couleurs vives, niveau de complexité complexe, à des fins de blog/contenu, conception réactive avec prise en charge du thème sombre, utilisation de Tailwind CSS.