CCHub Logo CCHub Tailwind Collection
구성 요소 채팅 창 Chat Window 구성 요소

Chat Window 구성 요소

다크 모드를 지원하는 반응형 채팅 창 구성 요소로, 미묘한 마이크로 인터랙션과 함께 비즈니스 사용을 위해 설계되었습니다. 단색 색 구성표를 사용합니다. JavaScript가 필요하지 않습니다.

미리 보기

HTML 코드 

<div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <div class="flex-1 overflow-y-auto p-4">
        <!-- Chat messages go here -->
        <div class="flex items-end mb-4">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg max-w-xs">
                <p class="text-sm">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-end justify-end mb-4">
            <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
                <p class="text-sm">I have a question about my order.</p>
            </div>
            <img class="w-8 h-8 rounded-full ml-2" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Avatar">
        </div>
        <!-- More messages -->
    </div>
    <div class="bg-white dark:bg-gray-800 p-4">
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 dark:border-gray-700 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
            <button class="ml-2 bg-blue-500 dark:bg-blue-700 text-white rounded-full p-2 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition duration-300 ease-in-out hover:scale-110" 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"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

관련 구성 요소

Chat Window 구성 요소

부동산 플랫폼에 적합한 복잡하고 트라이어딕 색상의 마이크로 인터랙션 중심의 채팅 창 구성 요소입니다. 대화 목록, 메시지 풍선이 있는 활성 채팅 영역, 대화형 입력 필드를 특징으로 하며, 모두 완벽하게 반응하고 다크 모드를 지원합니다.

열다

Chat Window 구성 요소

포레스트/그린 팔레트가 있는 복잡한 3D 스타일의 채팅 창 구성 요소로, 제조/산업 애플리케이션용으로 설계되었으며, 응답성과 다크 모드를 지원합니다.

열다

Chat Window 구성 요소

모노스페이스/개발자 디자인 미학, 가을 색 구성표를 갖춘 복잡하고 반응이 빠른 채팅 창 구성 요소로, 다크 모드 지원 및 대화형 요소를 포함하여 스포츠/피트니스 애플리케이션에 최적화되어 있습니다.

열다