CCHub Logo CCHub Tailwind Collection
コンポーネント コミュニティフォーラム コミュニティフォーラムコンポーネント

コミュニティフォーラムコンポーネント

Tailwind CSSを使用してダークモードでスタイル設定されたレスポンシブコミュニティフォーラムコンポーネント。このコンポーネントは、目の疲れを軽減するために暗い背景を特徴とし、アバターやフォーラムの投稿のプレースホルダー画像が含まれています。

プレビュー

HTMLコード 

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg max-w-3xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Latest Discussions</h3>
        <div class="mt-4">
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <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 mr-3">
                    <div>
                        <h4 class="font-semibold">John Doe</h4>
                        <span class="text-gray-400 text-sm">2 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">What are the best practices for learning JavaScript?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">5 replies</span>
                    <span class="text-gray-400">10 likes</span>
                </div>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <h4 class="font-semibold">Jane Smith</h4>
                        <span class="text-gray-400 text-sm">3 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">Any recommendations for a good code editor?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">2 replies</span>
                    <span class="text-gray-400">5 likes</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Join the Conversation</h3>
        <form class="mt-4 space-y-4">
            <textarea class="w-full p-2 rounded-lg bg-gray-800 text-white placeholder-gray-400 resize-none" rows="4" placeholder="Share your thoughts..."></textarea>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Post</button>
        </form>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg mt-4">
        <h3 class="text-xl font-semibold mb-2">Popular Topics</h3>
        <ul class="space-y-2">
            <li class="bg-gray-700 p-2 rounded">#JavaScript</li>
            <li class="bg-gray-700 p-2 rounded">#React</li>
            <li class="bg-gray-700 p-2 rounded">#TailwindCSS</li>
            <li class="bg-gray-700 p-2 rounded">#NodeJS</li>
            <li class="bg-gray-700 p-2 rounded">#WebDevelopment</li>
        </ul>
    </div>
</div>

関連コンポーネント

コミュニティフォーラムコンポーネント

ニューモーフィズムデザイン、グレースケールの配色、Tailwind CSSを使用したソーシャルメディアのシンプルな複雑さを備えたコミュニティフォーラムコンポーネント。ダークテーマをサポートするレスポンシブデザイン。

開ける

コミュニティフォーラムコンポーネント

アバター、スレッド、ダークテーマを備えたニューモーフィズムスタイルのコミュニティフォーラムコンポーネント。

開ける

ブルータリストコミュニティフォーラムコンポーネント

鮮やかな色、適度な複雑さ、ダークモードのサポートを備えたソーシャルメディアインターフェイス用のブルータリストスタイルのコミュニティフォーラムコンポーネント。大胆なタイポグラフィ、ハイコントラスト要素、ブルータリズムデザインに典型的な非対称のレイアウトを備えたフォーラム投稿リストが特徴です。ユーザーアバター、インタラクションボタン、鮮やかな色のアクセントを備えた生々しく意図的に粗雑な美学を備えた投稿アイテムが含まれています。

開ける