CCHub Logo CCHub Tailwind Collection
コンポーネント チャットウィンドウ チャットウィンドウコンポーネント

チャットウィンドウコンポーネント

ブルータリズムスタイルでデザインされたチャットウィンドウコンポーネントで、ハイコントラスト、レスポンシブエフェクト、ダークテーマに対応しています。

プレビュー

HTMLコード 

<div class="max-w-lg mx-auto mt-10 p-4 bg-gray-100 rounded-lg shadow-lg dark:bg-gray-800 border-2 border-black dark:border-gray-600">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-black dark:text-white">Chat Room</h2>
        <button class="px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded hover:bg-blue-500 focus:outline-none">Join</button>
    </div>
    <div class="border-2 border-black dark:border-gray-600 h-64 overflow-y-scroll p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">John Doe:</span>
                <p class="text-black dark:text-gray-200">Hello! How is everyone?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Jane Smith:</span>
                <p class="text-black dark:text-gray-200">I'm doing great, thanks for asking!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Mike Brown:</span>
                <p class="text-black dark:text-gray-200">Excited for the weekend!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Emily White:</span>
                <p class="text-black dark:text-gray-200">Same here! Any plans?</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <textarea rows="3" class="w-full p-2 border-2 border-black dark:border-gray-600 rounded" placeholder="Type a message..."></textarea>
        <button class="mt-2 px-3 py-1 text-sm font-semibold text-white bg-green-600 rounded hover:bg-green-500 focus:outline-none">Send</button>
    </div>
</div>

関連コンポーネント

チャットウィンドウコンポーネント

マテリアルデザインの原則に基づいて設計されたレスポンシブチャットウィンドウコンポーネントで、非営利団体/慈善団体に適した秋の配色が特徴です。ダークモードのサポートと、メッセージバブルや入力フィールドなどのインタラクティブ要素が含まれています。

開ける

シンプルなブルータリズムチャットウィンドウ

ブルータリストのシンプルなグレースケールチャットウィンドウコンポーネントで、ダークモードとレスポンシブデザインでブログコンテンツを消費

開ける

チャットウィンドウコンポーネント

パステルカラーとインタラクティブ機能を備えたモダンな3Dデザインを紹介するレスポンシブチャットウィンドウコンポーネントで、ポートフォリオディスプレイに適しています。

開ける