Компонент форума сообщества
Адаптивный компонент форума сообщества, разработанный в соответствии с принципами Material Design, подходящий для использования в блогах и контенте. Он имеет макет сетки, интерактивные элементы и поддерживает темные темы с использованием Tailwind CSS.
HTML-код
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/100" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Understanding Material Design</h2>
<p class="text-gray-600 dark:text-gray-300">This post discusses the key principles of Material Design and how to implement them effectively using Tailwind CSS.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/101" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Tailwind CSS for Beginners</h2>
<p class="text-gray-600 dark:text-gray-300">A beginner's guide to Tailwind CSS, exploring its utility-first approach and customization options.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/102" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Michael Johnson</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Accessibility in Design</h2>
<p class="text-gray-600 dark:text-gray-300">Exploring the importance of accessibility in design and how to ensure your designs are inclusive.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/103" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Emily Davis</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Responsive Web Design</h2>
<p class="text-gray-600 dark:text-gray-300">Learn how to create responsive web designs that adapt to different screen sizes and devices.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент форума сообщества
Компонент форума сообщества в стиле ретро/винтаж, с отзывчивыми эффектами и поддержкой темных тем с использованием Tailwind CSS.
Компонент форума сообщества
Компонент форума сообщества, выполненный в стиле брутализма с яркой цветовой гаммой, подходит для электронной коммерции. Он включает в себя множество интерактивных элементов, таких как сообщения, комментарии и профили пользователей, стилизованные с помощью Tailwind CSS для адаптивного дизайна с поддержкой темных тем.
Компонент форума сообщества
Отзывчивый компонент форума сообщества, выполненный в стиле Glassmorphism с земляными тонами, подходит для платформ социальных сетей. Он имеет эффект матового стекла и совместим с темным режимом.