검색 구성 요소

카테고리

채팅 창

고객 서비스와 사용자 간의 커뮤니케이션을 위한 인터페이스

Chat Window 구성 요소

소셜 미디어 인터페이스에 적합한 어두운 테마와 반응형 레이아웃으로 Material Design 스타일로 설계된 간단한 채팅 창 구성 요소입니다.

                <div class="h-screen bg-gray-100 dark:bg-gray-800 flex flex-col justify-end">
    <div class="max-w-md w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4">
        <div class="flex flex-col space-y-4 overflow-y-scroll h-80">
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
                    Hello, how are you?
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-gray-300 text-gray-800 p-2 rounded-lg rounded-br-none">
                    I'm good, thanks! How about you?
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
                    I'm doing well! Ready for the weekend?
                </div>
            </div>
        </div>
        <div class="mt-4 flex">
            <input type="text" placeholder="Type your message..." class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-500">
            <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 focus:outline-none">Send</button>
        </div>
    </div>
</div>

Chat Window 구성 요소

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

열다 미리 보기

                <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 구성 요소

전자 상거래 애플리케이션용으로 설계된 뉴모픽 채팅 창 구성 요소로, Tailwind CSS를 사용한 다크 모드와 반응형 디자인이 특징입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-5">
    <div class="w-full md:w-96 bg-gray-300 dark:bg-gray-900 rounded-2xl shadow-neumorphic p-6">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
            <div class="ml-3">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">How can we assist you today?</p>
            </div>
        </div>
        <div class="h-64 overflow-y-auto mb-4 rounded-lg bg-gray-200 dark:bg-gray-700 shadow-md p-3">
            <div class="p-2 mb-2 rounded-lg bg-white dark:bg-gray-800 shadow-neumorphic">
                <p class="text-gray-800 dark:text-gray-200">Hello! I have some questions about my order.</p>
            </div>
            <div class="p-2 mb-2 rounded-lg bg-blue-500 dark:bg-blue-700 text-white">
                <p>I can help with that!</p>
            </div>
            <div class="p-2 mb-2 rounded-lg bg-white dark:bg-gray-800 shadow-neumorphic">
                <p>When will it be shipped?</p>
            </div>
            <div class="p-2 mb-2 rounded-lg bg-blue-500 dark:bg-blue-700 text-white">
                <p>It should ship within 2-3 business days.</p>
            </div>
        </div>
        <div class="flex">
            <input type="text" placeholder="Type your message..." class="flex-grow bg-gray-200 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 p-2 rounded-l-md focus:outline-none focus:border-blue-500 dark:focus:border-blue-400">
            <button class="bg-blue-500 dark:bg-blue-700 text-white rounded-r-md px-4">Send</button>
        </div>
    </div>
</div>

<style>
    .shadow-neumorphic {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
                    -8px -8px 20px rgba(255, 255, 255, 0.5);
    }
</style>

Chat Window 구성 요소

3D 요소, 흙색 색 구성표 및 반응형 어두운 테마 지원으로 설계된 간단한 채팅 창 구성 요소입니다.

열다 미리 보기

                <div class="max-w-md mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-green-600 dark:bg-green-700 p-4">
        <h2 class="text-white text-lg font-semibold">Chat Window</h2>
    </div>
    <div class="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 class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</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 class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">I'm looking for more information about your services.</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 class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Sure! Please check our portfolio.</p>
            </div>
        </div>
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 shadow-sm" />
            <button class="ml-2 bg-green-600 dark:bg-green-700 text-white px-4 py-2 rounded-lg shadow-lg">Send</button>
        </div>
    </div>
</div>

Chat Window 구성 요소

중간 정도의 복잡성과 대화형 기능이 있는 대시보드를 위한 3차원 회색조 채팅 창 구성 요소입니다. 어두운 테마를 지원하는 반응형 디자인.

열다 미리 보기

                <!-- Chat Window Component (3D Grayscale, Moderate Complexity, Dashboard) -->

<div class="flex flex-col h-full bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
  <!-- Header -->
  <div class="flex items-center justify-between mb-4 pb-4 border-b border-gray-300 dark:border-gray-700">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <!-- Messages Area -->
  <div class="flex-1 overflow-y-auto space-y-4 pr-2">
    <!-- Incoming Message (3D Effect) -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Hello! This is an incoming message with a subtle 3D effect.</p>
      </div>
    </div>

    <!-- Outgoing Message (3D Effect) -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>This is an outgoing message designed with a 3D feel.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Here's another example of an incoming message.</p>
      </div>
    </div>

     <!-- Another Outgoing Message -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>And this is another outgoing message.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>
  </div>

  <!-- Input Area -->
  <div class="mt-4 pt-4 border-t border-gray-300 dark:border-gray-700 flex items-center">
    <input type="text" placeholder="Type your message..." class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="ml-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

Chat Window 구성 요소

전자 상거래 사이트를 위한 미니멀한 채팅 창 구성 요소로, 회색조 색 구성표, 적당한 복잡성 및 다크 모드 지원과 함께 응답성을 특징으로 합니다. HTML 및 Tailwind CSS로 구축되었습니다.

열다 미리 보기

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Chat Header -->
  <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
      <h1 class="ml-3 text-lg font-semibold text-gray-800 dark:text-white">Customer Support</h1>
    </div>
    <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </header>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4 space-y-4">
    <!-- Incoming Message -->
    <div class="flex justify-start">
      <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
        <p>Hello! How can I help you today?</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
        <p>I have a question about my order.</p>
      </div>
    </div>

    <!-- Incoming Message with Avatar -->
    <div class="flex justify-start items-start">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
      <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
        <p>Ok, please provide your order number.</p>
      </div>
    </div>

    <!-- Outgoing Message with Image -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
        <p>Here is a screenshot:</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/id/237/200/150" alt="Order Screenshot">
      </div>
    </div>

  </div>

  <!-- Chat Footer (Input Area) -->
  <footer class="flex items-center p-4 bg-white dark:bg-gray-800 shadow-md">
    <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600">
    <button class="ml-4 p-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700">
      Send
    </button>
  </footer>
</div>

레트로챗윈도우

Tailwind CSS를 사용하는 레트로/빈티지 스타일의 채팅 창 구성 요소로, 반응형 디자인과 다크 모드 지원을 특징으로 합니다. 자리 표시자 메시지 및 아바타가 포함됩니다. 자바스크립트가 없습니다.

열다 미리 보기

                <div class="flex flex-col h-96 w-80 sm:w-96 md:w-1/2 lg:w-1/3 mx-auto bg-gray-300 dark:bg-gray-800 border-4 border-black dark:border-white shadow-lg dark:shadow-xl font-mono">
  <!-- Header -->
  <div class="bg-gray-500 dark:bg-gray-900 text-white dark:text-gray-300 p-2 border-b-4 border-black dark:border-white flex justify-between items-center">
    <div class="text-lg font-bold">RetroNET Chat</div>
    <div class="flex space-x-1">
      <div class="w-3 h-3 bg-red-500 dark:bg-red-700 border border-black dark:border-white cursor-pointer" title="Close"></div>
      <div class="w-3 h-3 bg-yellow-500 dark:bg-yellow-600 border border-black dark:border-white cursor-pointer" title="Minimize"></div>
      <div class="w-3 h-3 bg-green-500 dark:bg-green-700 border border-black dark:border-white cursor-pointer" title="Maximize"></div>
    </div>
  </div>
  <!-- Messages Area -->
  <div class="flex-grow p-4 overflow-y-auto space-y-4">
    <!-- Received Message -->
    <div class="flex items-start space-x-3">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
        <p>Hello! Welcome to RetroNET Chat. How can I assist you?</p>
      </div>
    </div>
    <!-- Sent Message -->
    <div class="flex items-start justify-end space-x-3 flex-row-reverse">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
        <p>Hi there! I love the retro design!</p>
      </div>
    </div>
     <!-- Received Message with Image -->
    <div class="flex items-start space-x-3">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
        <p>Glad you like it! Here's a cool retro image:</p>
        <img src="https://picsum.photos/id/6/200/150" alt="Random Retro Image" class="mt-2 rounded-lg border-2 border-black dark:border-white max-w-full h-auto">
      </div>
    </div>
     <!-- Sent Message -->
    <div class="flex items-start justify-end space-x-3 flex-row-reverse">
      <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
        <p>Awesome! ✨</p>
      </div>
    </div>
  </div>
  <!-- Input Area -->
  <div class="p-4 border-t-4 border-black dark:border-white flex space-x-2">
    <input type="text" placeholder="Type your message..." class="flex-grow p-2 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 placeholder-gray-600 dark:placeholder-gray-400">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded border-2 border-black dark:border-white dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

Chat Window 구성 요소

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

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4"> <div class="flex-col flex flex-grow w-full max-w-xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden"> <div class="flex flex-col flex-grow h-0 p-4 overflow-auto"> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> </div> <div class="bg-gray-300 dark:bg-gray-700 p-4"> <input class="flex items-center h-10 w-full rounded px-3 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200" type="text" placeholder="Type your message…"> </div> </div> </div>

Chat Window 구성 요소

매력적인 애니메이션에 초점을 맞춘 마이크로 인터랙션이 있는 반응형 채팅 창 구성 요소입니다. 다크 모드를 지원하고 스타일링에 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="flex flex-col max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 ease-in-out hover:shadow-2xl">
    <div class="flex items-center justify-between p-4 border-b-2 border-gray-200 dark:border-gray-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
        <button class="focus:outline-none">
            <svg class="h-6 w-6 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.55 1.21a1 1 0 01-1.45-1.21zM4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
    </div>
    <div class="overflow-auto max-h-96 p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-150">
                <p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-150">
                <p class="text-gray-800 dark:text-gray-200">I have a question about my order.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t-2 border-gray-200 dark:border-gray-700">
        <form class="flex">
            <input type="text" placeholder="Type your message..." class="flex-grow p-2 border rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-200 ease-in-out">
            <button type="submit" class="ml-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 ease-in-out">
                Send
            </button>
        </form>
    </div>
</div>

Chat Window 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 채팅 창 구성 요소입니다. 사용자 정보가 있는 헤더, 들어오고 나가는 메시지가 있는 메시지 영역, 새 메시지를 입력할 수 있는 바닥글이 있습니다. 이미지는 picsum.photos 및 randomuser.me 의 자리 표시자입니다.

열다 미리 보기

                <div class="flex flex-col h-screen bg-gray-900 text-gray-200">
  <!-- Header -->
  <header class="flex items-center justify-between p-4 bg-gray-800">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <h1 class="text-lg font-semibold">Chat User</h1>
    </div>
    <!-- Add any header icons here -->
  </header>

  <!-- Message Area -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex items-start mb-4">
      <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Other User Avatar">
      <div class="flex flex-col">
        <div class="bg-gray-700 text-gray-200 p-3 rounded-lg mb-1">
          Hello! How are you?
        </div>
        <span class="text-xs text-gray-500">10:00 AM</span>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-end justify-end mb-4">
      <div class="flex flex-col items-end">
        <div class="bg-blue-600 text-white p-3 rounded-lg mb-1">
          I'm good, thanks! How about you?
        </div>
        <span class="text-xs text-gray-500">10:05 AM</span>
      </div>
      <img class="w-8 h-8 rounded-full ml-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>

    <!-- Add more messages here -->

  </div>

  <!-- Footer -->
  <footer class="flex items-center p-4 bg-gray-800">
    <input type="text" class="flex-1 rounded-full px-4 py-2 mr-4 bg-gray-700 text-gray-200 focus:outline-none" placeholder="Type your message...">
    <button class="bg-blue-600 text-white rounded-full p-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"/>
      </svg>
    </button>
  </footer>
</div>