Community-Forum-Komponente - Glassmorphism E-Commerce
Eine Community-Forenkomponente im Glassmorphism-Stil für den E-Commerce mit durchscheinenden Elementen, Unschärfeeffekten und einem triadischen Farbschema. Reaktionsschnell mit Unterstützung für den Dunkelmodus.
HTML-Code
<div class="min-h-screen bg-gradient-to-br from-blue-300 via-pink-300 to-purple-400 dark:from-gray-900 dark:via-blue-950 dark:to-purple-950 p-4 sm:p-8 flex items-center justify-center font-sans">
<div class="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Left Panel: Categories / Navigation -->
<div class="md:col-span-1 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-30 p-6 sm:p-8 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 flex flex-col space-y-6">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 drop-shadow-md">Forum Categories</h2>
<nav class="space-y-3">
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M9.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">General Discussion</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 11-8 0 4 4 0 018 0zM17 8a4 4 0 11-8 0 4 4 0 018 0zM7 16a4 4 0 11-8 0 4 4 0 018 0zM17 16a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">Product Reviews</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M12 8c-1.657 0-3 .895-3 2v2.219a2 2 0 00.5 1.625l1.625 1.625A2 2 0 0113.219 20H18a2 2 0 002-2V7.89l-3.24-3.24M12 8V7a4 4 0 00-4-4H5a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2zM18 10a2 2 0 012-2h1a2 2 0 012 2v3a2 2 0 01-2 2h-1a2 2 0 01-2-2z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">Technical Support</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">Shopping Tips & Deals</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">New Topic</span>
</a>
</nav>
<div class="mt-auto">
<p class="text-sm text-gray-700 dark:text-gray-300">Community Guidelines & Rules</p>
<a href="#" class="text-blue-700 dark:text-blue-400 hover:underline text-sm">Read More</a>
</div>
</div>
<!-- Main Content: Forum Topics -->
<div class="md:col-span-2 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-30 p-6 sm:p-8 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 flex flex-col space-y-6">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 drop-shadow-md">Recent Discussions</h2>
<!-- Search and Filter -->
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
<input type="text" placeholder="Search discussions..." class="flex-1 p-3 rounded-xl bg-white bg-opacity-40 border border-white border-opacity-50 text-gray-900 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:bg-opacity-50 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400">
<select class="p-3 rounded-xl bg-white bg-opacity-40 border border-white border-opacity-50 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:bg-opacity-50 dark:border-gray-600 dark:text-gray-100">
<option>Sort by: Latest</option>
<option>Sort by: Popular</option>
<option>Sort by: Unanswered</option>
</select>
</div>
<!-- Topic List -->
<div class="space-y-4 flex-grow">
<!-- Topic Card 1 -->
<a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
<div class="flex items-center space-x-3 mb-2">
<img class="w-9 h-9 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gray-900 dark:text-white">Best Vacuum Cleaner for Pet Hair?</p>
<p class="text-sm text-gray-700 dark:text-gray-300">by SarahL, 2 hours ago in <span class="font-medium text-blue-700 dark:text-blue-400">Product Reviews</span></p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 line-clamp-2">Looking for recommendations on a powerful vacuum cleaner that can handle heavy pet shedding. Any suggestions or experiences?</p>
<div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 24 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 1.2K Views</span>
</div>
</a>
<!-- Topic Card 2 -->
<a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
<div class="flex items-center space-x-3 mb-2">
<img class="w-9 h-9 rounded-full object-cover border-2 border-sky-500 dark:border-sky-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gray-900 dark:text-white">Tips for finding the best online deals</p>
<p class="text-sm text-gray-700 dark:text-gray-300">by DealHunter, 5 hours ago in <span class="font-medium text-purple-700 dark:text-purple-400">Shopping Tips & Deals</span></p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 line-clamp-2">Share your secret tips and tricks for snagging the best discounts and promotions online.</p>
<div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 48 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 2.5K Views</span>
</div>
</a>
<!-- Topic Card 3 -->
<a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
<div class="flex items-center space-x-3 mb-2">
<img class="w-9 h-9 rounded-full object-cover border-2 border-red-500 dark:border-red-400" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gray-900 dark:text-white">Trouble with account login after update</p>
<p class="text-sm text-gray-700 dark:text-gray-300">by TechNoob, 1 day ago in <span class="font-medium text-pink-700 dark:text-pink-400">Technical Support</span></p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 line-clamp-2">Anyone else having issues logging into their account after the recent website update? Keeps saying invalid credentials.</p>
<div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 18 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 980 Views</span>
</div>
</a>
</div>
<!-- Pagination -->
<div class="flex justify-center items-center space-x-2 mt-6">
<button class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
Previous
</button>
<button class="px-4 py-2 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white font-bold">
1
</button>
<button class="px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
2
</button>
<button class="px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
3
</button>
<button class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
Next
</button>
</div>
</div>
</div>
</div>Verwandte Komponenten
Community-Forum-Komponente
Eine einfache Community-Forenkomponente unter Verwendung von Material Design-Prinzipien, die auf den Konsum von Blog-Inhalten mit Erdtönen und responsivem Design für die Unterstützung des Dunkelmodus zugeschnitten ist.
Community-Forum-Komponente
Eine Community-Forum-Komponente im Retro-/Vintage-Designstil mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.
Community-Forum-Komponente
Eine Community-Forum-Komponente, die im Brutalismus-Stil mit einem lebendigen Farbschema gestaltet ist und sich für E-Commerce-Erlebnisse eignet. Es enthält eine Vielzahl interaktiver Elemente wie Beiträge, Kommentare und Benutzerprofile, die alle mit Tailwind CSS für ein responsives Design mit Unterstützung für dunkle Themen gestaltet sind.