Componente del forum della comunità (E-commerce Bauhaus)
Un componente semplice e reattivo del forum della community progettato per l'e-commerce, caratterizzato da forme geometriche ispirate al Bauhaus e una tavolozza di colori tenui. Include il supporto per la modalità oscura.
Codice HTML
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">
<!-- Section Title -->
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center uppercase tracking-wider">
Customer Stories & Feedback
</h2>
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Forum Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
<div class="absolute -top-3 -left-3 w-8 h-8 bg-blue-500 transform rotate-45"></div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4">
<div>
<p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Jane Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Absolutely Transformed My Workflow!"</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
I was skeptical at first, but this product exceeded all my expectations. The quality is top-notch,
and it integrated seamlessly with my existing setup. Highly recommend for anyone looking to boost productivity!
</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1 fill-blue-500 dark:fill-blue-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
12 Likes
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
5 Comments
</span>
</div>
</div>
<!-- Forum Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
<div class="absolute -top-3 -right-3 w-8 h-8 bg-red-500 transform -rotate-45"></div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/29.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 dark:border-red-400 mr-4">
<div>
<p class="font-semibold text-lg text-gray-800 dark:text-gray-100">John Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Great Product, Minor Suggestion"</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
Overall, I'm very satisfied with my purchase. The build quality is solid, and it performs as advertised.
My only constructive feedback would be to consider adding 'X' feature in a future update.
</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1 fill-red-500 dark:fill-red-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
8 Likes
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
2 Comments
</span>
</div>
</div>
<!-- Forum Card 3 (Placeholder for more, hidden on small screens) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
<div class="absolute -bottom-3 -right-3 w-8 h-8 bg-yellow-500 transform rotate-45"></div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/77.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-yellow-500 dark:border-yellow-400 mr-4">
<div>
<p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Emily White</p>
<p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Fantastic Support Team!"</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
I had a small issue with my order, and the customer support was incredibly responsive and helpful.
They resolved my problem quickly and professionally. Really appreciate the dedication!
</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1 fill-yellow-500 dark:fill-yellow-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
15 Likes
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
7 Comments
</span>
</div>
</div>
<!-- Forum Card 4 (Placeholder for more, hidden on small screens) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
<div class="absolute -bottom-3 -left-3 w-8 h-8 bg-green-500 transform -rotate-45"></div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 dark:border-green-400 mr-4">
<div>
<p class="font-semibold text-lg text-gray-800 dark:text-gray-100">David Lee</p>
<p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"A Must-Have for Every Enthusiast!"</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
I've been looking for a product like this for ages. It delivers on all its promises and more.
Sturdy, efficient, and well-designed. Don't hesitate to buy it!
</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1 fill-green-500 dark:fill-green-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
20 Likes
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
10 Comments
</span>
</div>
</div>
</div>
<!-- Call to Action / View More -->
<div class="text-center mt-8">
<button class="px-6 py-3 bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase rounded-md
tracking-wider hover:bg-gray-600 dark:hover:bg-gray-300 transition duration-300 ease-in-out
border border-gray-700 dark:border-gray-200 shadow-md">
View All Discussions
</button>
</div>
</div>Componenti correlati
Componente del Forum della Comunità - Glassmorphism E-commerce
Un componente del forum della comunità in stile glassmorphism per l'e-commerce, con elementi traslucidi, effetti di sfocatura e una combinazione di colori triadica. Reattivo con supporto per la modalità oscura.
Componente del forum della community
Un semplice componente del forum della community che utilizza i principi del Material Design, su misura per il consumo di contenuti del blog con combinazione di colori dei toni della Terra e design reattivo per il supporto della modalità oscura.
Componente del forum della comunità brutalista
Un componente del forum della comunità in stile brutalista per le interfacce dei social media con colori vivaci, complessità moderata e supporto per la modalità oscura. Presenta un elenco di post del forum con tipografia audace, elementi ad alto contrasto e layout asimmetrici tipici del design brutalista. Include elementi di pubblicazione con avatar utente, pulsanti di interazione e un'estetica grezza e intenzionalmente grezza con accenti di colore vivaci.