コミュニティフォーラムコンポーネント
夕日をイメージした温かみのある配色を採用したシンプルでレスポンシブなコミュニティフォーラムコンポーネントで、デートやソーシャルプラットフォームに適しています。マテリアルデザインのようなシャドウが特徴で、ダークモードのサポートが含まれています。
HTMLコード
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in transition-shadow duration-300 dark:shadow-2xl dark:shadow-orange-900/20">
<div class="bg-gradient-to-r from-orange-400 to-red-500 p-4 sm:p-5 flex items-center justify-between shadow-md">
<h2 class="text-white text-lg sm:text-xl font-semibold">Community Buzz</h2>
<button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
</div>
<div class="p-4 sm:p-5 space-y-4">
<!-- Forum Post 1 -->
<div class="flex items-start space-x-3 sm:space-x-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Sarah_Loves_Sunsets</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Anyone else feel like this community has the best vibes? So much positivity! ✨"</p>
<div class="flex items-center space-x-3 mt-2">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
54
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
12
</button>
</div>
</div>
</div>
<hr class="border-gray-200 dark:border-gray-700">
<!-- Forum Post 2 -->
<div class="flex items-start space-x-3 sm:space-x-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Traveler_Mike</p>
<span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Just joined! Looking forward to connecting with amazing people here. Where's everyone from?"</p>
<div class="flex items-center space-x-3 mt-2">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
31
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
8
</button>
</div>
</div>
</div>
</div>
<div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center space-x-3">
<img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Your Avatar">
<input type="text" placeholder="Write a new post..." class="flex-1 p-2 sm:p-2.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 dark:border-none border border-gray-300">
<button class="p-2 rounded-full bg-orange-500 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
</div>
</div>
</div>関連コンポーネント
コミュニティフォーラムコンポーネント
複雑で応答性の高い、Skeuomorphismが設計した、グレースケールの配色、ダークテーマのサポート、JavaScriptなしの電子商取引用のコミュニティフォーラムコンポーネント。Tailwind CSSとダミーの画像/アバターを使用します。
コミュニティフォーラムコンポーネント
Glassmorphismデザイン、鮮やかな配色、複雑な複雑さのレベル、ブログ/コンテンツの目的、ダークテーマをサポートするレスポンシブデザイン、Tailwind CSSを使用したコミュニティフォーラムコンポーネント。
アールデコファイナンスフォーラムコンポーネント
シンプルで応答性の高いコミュニティフォーラムコンポーネントは、金融や銀行のインターフェースに適した落ち着いたアールデコ調のスタイルでデザインされ、ダークモードをサポートしています。