Компонент Форума Сообщества - Ар-деко Монохроматический
Отзывчивый компонент форума сообщества, разработанный в эстетике ар-деко с использованием монохроматической цветовой схемы, подходящий для приложений Technology/SaaS. Особенности поддержки темного режима и интерактивных элементов.
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>Связанные компоненты
Компонент форума сообщества
Компонент форума сообщества с дизайном Neumorphism, цветовой схемой Grayscale и простой сложностью для социальных сетей с использованием Tailwind CSS. Адаптивный дизайн с поддержкой темных тем.
Компонент форума бруталистского сообщества
Компонент форума сообщества в бруталистском стиле для интерфейсов социальных сетей с яркими цветами, умеренной сложностью и поддержкой темного режима. Содержит список сообщений на форуме с жирной типографикой, высококонтрастными элементами и асимметричными макетами, типичными для брутального дизайна. Включает в себя элементы постов с аватарами пользователей, кнопками взаимодействия и грубой, намеренно грубой эстетикой с яркими цветовыми акцентами.
Компонент форума сообщества
Отзывчивый компонент форума сообщества, разработанный в стиле скевоморфизма и приглушенной/ненасыщенной цветовой схемы, подходит для правительственных/общедоступных веб-сайтов, включая поддержку темного режима.