コミュニティフォーラムコンポーネント
ブルータリズムスタイルでデザインされたコミュニティフォーラムコンポーネントで、鮮やかな配色で、eコマース体験に適しています。投稿、コメント、ユーザープロファイルなどのさまざまなインタラクティブ要素が含まれており、すべてTailwind CSSでスタイル設定されており、ダークテーマをサポートするレスポンシブデザインになっています。
HTMLコード
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-red-600 dark:text-yellow-300 mb-4">Community Forum</h2>
<div class="mb-4">
<input type="text" placeholder="Search..." class="w-full p-2 border border-red-500 dark:border-yellow-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 dark:focus:ring-yellow-300" />
</div>
<div class="space-y-6">
<!-- Forum Post -->
<div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="ml-3">
<h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">John Doe</h3>
<span class="text-gray-500 dark:text-gray-400">Posted on 12 Oct 2023</span>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-3">This is a sample forum post discussing the latest trends in e-commerce. Feel free to share your thoughts!</p>
<div class="flex space-x-4">
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
<button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
</div>
<div class="mt-4">
<span class="text-gray-500 dark:text-gray-400">2 Comments</span>
</div>
</div>
<!-- Repeat Forum Post as needed -->
<div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="ml-3">
<h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">Jane Smith</h3>
<span class="text-gray-500 dark:text-gray-400">Posted on 10 Oct 2023</span>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-3">Excited about the new sales coming this holiday season! Anyone else?</p>
<div class="flex space-x-4">
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
<button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
</div>
<div class="mt-4">
<span class="text-gray-500 dark:text-gray-400">5 Comments</span>
</div>
</div>
</div>
</div>関連コンポーネント
コミュニティフォーラムコンポーネント
パステルカラーの配色、マテリアルデザインの影響、ダークモードのサポートを備えたシンプルなコミュニティフォーラムコンポーネント。ブログ/コンテンツ消費のためのレスポンシブレイアウトを備えています。
コミュニティフォーラムコンポーネント9
すりガラスのような半透明の要素、レスポンシブ効果、ダークテーマのサポートを備えたglassmorphismデザインを特徴とするコミュニティフォーラムコンポーネント。