구성 요소 채팅 창 Chat Window 구성 요소

Chat Window 구성 요소

반응형 채팅 창 구성 요소는 파스텔 색상과 대화형 기능을 갖춘 현대적인 3D 디자인을 선보이며 포트폴리오 디스플레이에 적합합니다.

미리 보기

HTML 코드

<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6">
    <div class="mb-4 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-300 dark:border-gray-600 shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Available 24/7</p>
        </div>
    </div>
    <div class="h-64 overflow-y-auto rounded-lg border border-gray-300 dark:border-gray-600 p-4 bg-gray-50 dark:bg-gray-700 shadow-inner">
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Hello! How can I assist you today?</p>
            </div>
        </div>
        <div class="mb-2 flex items-start justify-end">
            <div class="mr-2 bg-blue-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">I'm looking for some information on your services.</p>
            </div>
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-purple-300 dark:border-gray-600">
        </div>
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Sure! Here’s what you need to know...</p>
            </div>
        </div>
    </div>
    <form class="mt-4">
        <div class="flex items-center border rounded-lg border-gray-300 dark:border-gray-600 overflow-hidden">
            <input type="text" placeholder="Type your message..." class="flex-grow p-2 text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg focus:outline-none" />
            <button type="submit" class="bg-pink-400 dark:bg-pink-600 text-white px-4 py-2 rounded-lg">Send</button>
        </div>
    </form>
</div>

관련 구성 요소

Chat Window 구성 요소

트라이어딕 색 구성표, 마이크로 인터랙션, 다크 모드 지원을 갖춘 반응형 채팅 창 구성 요소로, 전자 상거래를 위해 설계되었습니다. 채팅 헤더, 발신자/수신자 메시지가 있는 메시지 목록 및 메시지 입력이 있습니다.

열다

Chat Window 구성 요소

Brutalism 스타일로 디자인된 Chat Window 구성 요소로, 고대비, 반응형 효과, 어두운 테마를 지원합니다.

열다

Chat Window 구성 요소

Tailwind CSS를 사용하여 3D 디자인 요소와 어두운 테마를 지원하는 반응형 채팅 창 구성 요소입니다. JavaScript가 필요하지 않습니다.

열다