コミュニティフォーラムコンポーネント
マテリアルデザインの原則に基づいて設計されたレスポンシブコミュニティフォーラムコンポーネントで、ブログやコンテンツの消費に適しています。グリッドレイアウト、インタラクティブ要素が特徴で、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を使用したソーシャルメディアのシンプルな複雑さを備えたコミュニティフォーラムコンポーネント。ダークテーマをサポートするレスポンシブデザイン。