Componente del forum della comunità - Art Déco monocromatico
Un componente reattivo del forum della community progettato con un'estetica Art Déco utilizzando una combinazione di colori monocromatica, adatto per applicazioni tecnologiche/SaaS. Dispone di supporto per la modalità oscura ed elementi interattivi.
Codice HTML
<div class="font-sans bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-colors duration-300 p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-xl overflow-hidden
border border-gray-200 dark:border-gray-700
" style="box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05), 0 0 0 10px rgba(173,216,230, 0.1) inset;"
>
<div class="p-6 sm:p-8 lg:p-10 border-b border-gray-200 dark:border-gray-700 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 via-blue-500/10 to-blue-300/20 dark:from-blue-700/20 dark:via-blue-900/10 dark:to-blue-700/20 opacity-70" style="clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);"></div>
<div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight mb-4 sm:mb-0">
The Developer Hub
</h2>
<button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white rounded-lg shadow-md transition-all duration-300
flex items-center space-x-2 border-2 border-blue-600 dark:border-blue-500
transform hover:scale-105 active:scale-95
relative overflow-hidden group">
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<svg class="w-5 h-5" 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 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
<span>New Topic</span>
</button>
</div>
<p class="mt-4 text-base sm:text-lg text-gray-600 dark:text-gray-400 relative z-10">
Connect, share insights, and get support from our vibrant community of developers.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-0 border-t border-gray-200 dark:border-gray-700">
<!-- Left Sidebar (Categories/Filters) -->
<div class="md:col-span-1 p-6 sm:p-8 lg:p-10 border-r border-gray-200 dark:border-gray-700 md:h-full">
<h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6">
Categories
</h3>
<nav class="space-y-3">
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
<svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span class="font-medium">General Discussion</span>
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
<svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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-1-1.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="font-medium">Feature Requests</span>
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
<svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="font-medium">Bug Reports</span>
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
<svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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="M10 20l4-16m4 4l4 4-4 4M6 16L2 12l4-4"></path></svg>
<span class="font-medium">Technical Discussions</span>
</a>
</nav>
</div>
<!-- Main Content (Topic List) -->
<div class="md:col-span-2 p-6 sm:p-8 lg:p-10">
<h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6">
Recent Topics
</h3>
<div class="space-y-4">
<!-- Topic Item 1 -->
<div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
Best Practices for Scalable Microservices Architecture
</a>
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
<span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">Alex Johnson</a> on October 26, 2023
</p>
</div>
<div class="flex-shrink-0 text-right md:text-left">
<div class="flex items-center space-x-4">
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
24
</span>
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-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="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
</span>
</div>
</div>
</div>
<!-- Topic Item 2 -->
<div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
Understanding new CSS features in Modern Browsers
</a>
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
<span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">Sarah Lee</a> on October 25, 2023
</p>
</div>
<div class="flex-shrink-0 text-right md:text-left">
<div class="flex items-center space-x-4">
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
18
</span>
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-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="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>
870
</span>
</div>
</div>
</div>
<!-- Topic Item 3 -->
<div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
Debugging common React performance bottlenecks
</a>
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
<span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">David Kim</a> on October 24, 2023
</p>
</div>
<div class="flex-shrink-0 text-right md:text-left">
<div class="flex items-center space-x-4">
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
31
</span>
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-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="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.5K
</span>
</div>
</div>
</div>
<!-- Pagination Placeholder -->
<div class="flex justify-center mt-8">
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
2
</a>
<a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
3
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente del forum della community
Un componente semplice e reattivo del forum della community con una combinazione di colori caldi e ispirati al tramonto, adatto per piattaforme di appuntamenti o social. Presenta ombre simili al Material Design e include il supporto per la 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.
Componente del forum della community
Un componente del forum della community reattivo progettato con i principi del Material Design, adatto per il consumo di blog e contenuti. Presenta un layout a griglia, elementi interattivi e supporta temi scuri utilizzando Tailwind CSS.