Forum_Community_Component
Отзывчивый и тематический компонент для обсуждения на форуме/в сообществе с корпоративным/профессиональным стилем дизайна и океанской/синей цветовой схемой, включая поддержку темного режима.
HTML-код
<div class="bg-blue-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans">
<!-- Component Header -->
<div class="max-w-7xl mx-auto mb-8">
<h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2">Community Discussions</h1>
<p class="text-lg text-blue-700 dark:text-blue-300">Engage with our professionals, share insights, and get support.</p>
</div>
<!-- Main Content Area - Grid Layout for Topics/Posts -->
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Left Column: Forum Categories/Topics -->
<div class="md:col-span-2 space-y-6">
<!-- Search and Filter Bar -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm flex flex-col sm:flex-row items-center gap-4">
<input type="text" placeholder="Search discussions..." class="flex-grow p-2 border border-blue-200 dark:border-gray-700 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white placeholder-blue-400 dark:placeholder-gray-500">
<select class="p-2 border border-blue-200 dark:border-gray-700 rounded-md bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white">
<option>All Categories</option>
<option>Product Feedback</option>
<option>Technical Support</option>
<option>General Discussion</option>
<option>Announcements</option>
</select>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out flex-shrink-0">
New Topic
</button>
</div>
<!-- Discussion Post Card (Repeated for multiple posts) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
<div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
<div>
<a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">John Doe</a>
<span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 15, 2024</span>
</div>
</div>
<h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">How to best integrate analytics with our new CRM?</h2>
<p class="text-blue-700 dark:text-blue-300 line-clamp-3">We're looking for the most efficient way to connect Google Analytics and our in-house CRM system to get a unified view of customer data. Any recommended tools or best practices?</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>56 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: CRM</span>
</div>
<a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
<div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar">
<div>
<a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Jane Doe</a>
<span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 14, 2024</span>
</div>
</div>
<h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Seeking advice on enhancing team collaboration with new tools.</h2>
<p class="text-blue-700 dark:text-blue-300 line-clamp-3">Our team is growing, and we're looking for innovative tools or strategies to improve our daily collaboration and project management. Any suggestions beyond the usual suspects?</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>32 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Productivity</span>
</div>
<a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
<div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
<div>
<a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Michael Scott</a>
<span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 13, 2024</span>
</div>
</div>
<h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Best practices for secure cloud deployments?</h2>
<p class="text-blue-700 dark:text-blue-300 line-clamp-3">Looking for advice on maintaining robust security for our cloud infrastructure. What are the essential guidelines and tools for a corporate environment?</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>78 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Cloud Security</span>
</div>
<a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
</div>
</div>
</div>
</div>
<!-- Right Column: Sidebar (Popular Topics, Recent Activity etc.) -->
<div class="space-y-6">
<!-- Popular Topics -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
<h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Popular Topics</h3>
<ul class="space-y-3">
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block font-medium">Future of AI in Business Operations</a></li>
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Optimizing Remote Workflows</a></li>
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Cybersecurity Threats 2024 Report</a></li>
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Sustainable Business Practices</a></li>
</ul>
</div>
<!-- Recent Activity -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
<h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Recent Activity</h3>
<ul class="space-y-3">
<li class="flex items-start">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div>
<p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Sarah L.</span> replied to "Challenges in Hybrid Cloud Adoption"</p>
<span class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</span>
</div>
</li>
<li class="flex items-start">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">David K.</span> started "Best Practices for Q2 Planning"</p>
<span class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</span>
</div>
</li>
<li class="flex items-start">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Avatar">
<div>
<p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Emily R.</span> voted on "Effective Communication Strategies"</p>
<span class="text-xs text-gray-500 dark:text-gray-400">3 hours ago</span>
</div>
</li>
</ul>
</div>
<!-- Pinned Announcements -->
<div class="bg-blue-600 dark:bg-blue-900 text-white dark:text-blue-100 rounded-lg shadow-md p-4 sm:p-6">
<h3 class="text-lg font-bold mb-3">📢 Important Announcement</h3>
<p class="text-sm opacity-90">Our annual system maintenance will occur on May 1st from 2 AM to 6 AM UTC. Expect brief service interruptions. Thank you for your understanding.</p>
<a href="#" class="mt-3 inline-block bg-blue-700 dark:bg-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full transition duration-300">Read More</a>
</div>
</div>
</div>
<!-- Pagination (Example) -->
<div class="max-w-7xl mx-auto mt-8 flex justify-center">
<nav class="relative z-0 inline-flex 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-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-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="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors z-10">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
2
</a>
<a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-400">
...
</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
10
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-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="evenodd" />
</svg>
</a>
</nav>
</div>
</div>Связанные компоненты
Ретро-компонент для электронной коммерции
Сложный компонент электронной коммерции, выполненный в стиле ретро/винтаж, с триадической цветовой гаммой и адаптивным дизайном, подходит для бизнес/корпоративных сайтов с поддержкой темного режима.
Компонент электронной коммерции
Отзывчивый компонент электронной коммерции, стилизованный под стеклянный морфизм и пастельные тона, подходящий для интерфейсов социальных сетей, с поддержкой темных тем.
Компонент панели управления электронной коммерции
Простой компонент панели управления электронной коммерции с брутальным и ярким дизайном, с адаптивным макетом и поддержкой темных тем.