채팅 창

Chat Window 구성 요소

콘텐츠 소비를 위해 설계된 파스텔 색 구성표가 있는 간단한 Glassmorphism 스타일의 채팅 창 구성 요소입니다. 반응형 레이아웃과 어두운 테마 지원이 특징입니다.

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black flex items-center justify-center p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20">
    <div class="font-sans text-gray-800 dark:text-white mb-4 text-xl font-semibold">Chat Window</div>
    <div class="space-y-4 h-64 overflow-y-auto pr-2 scrollbar-thumb-purple-300 scrollbar-track-purple-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thin">

      <!-- Incoming Message -->
      <div class="flex items-end">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-300 dark:border-gray-500"/>
        <div class="bg-purple-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">Hello! This is a simple chat message. How are you?</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:00 AM</span>
        </div>
      </div>

      <!-- Outgoing Message -->
      <div class="flex justify-end items-end">
        <div class="bg-pink-200 dark:bg-gray-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">I'm doing great, thanks for asking! This design is simple and elegant.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
        </div>
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-pink-300 dark:border-gray-500"/>
      </div>

      <!-- Incoming Message 2 -->
      <div class="flex items-end">
        <img src="https://randomuser.me/api/portraits/women/70.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-300 dark:border-gray-500"/>
        <div class="bg-purple-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">I totally agree! The Glassmorphism effect adds a nice touch.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:10 AM</span>
        </div>
      </div>

      <!-- Outgoing Message 2 -->
      <div class="flex justify-end items-end">
        <div class="bg-pink-200 dark:bg-gray-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">And the pastel colors are very soothing for reading.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:15 AM</span>
        </div>
        <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-pink-300 dark:border-gray-500"/>
      </div>

    </div>
    <div class="mt-4 flex">
      <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-lg bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-gray-500 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"/>
      <button class="ml-3 px-4 py-2 bg-purple-400 hover:bg-purple-500 dark:bg-gray-600 dark:hover:bg-gray-500 text-white rounded-lg transition duration-200 ease-in-out shadow-md">Send</button>
    </div>
  </div>
</div>

<style>
/* Custom Scrollbar for Webkit browsers */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-scrollbar-track-color);
  border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--tw-scrollbar-thumb-color);
  border-radius: 10px;
}

/* Define custom properties for scrollbar colors */
.scrollbar-thumb-purple-300 {
  --tw-scrollbar-thumb-color: #d1b1e8;
}

.scrollbar-track-purple-100 {
  --tw-scrollbar-track-color: #ede9fe;
}

.dark\:scrollbar-thumb-gray-600 {
  --tw-scrollbar-thumb-color: #4b5563;
}

.dark\:scrollbar-track-gray-800 {
  --tw-scrollbar-track-color: #1f2937;
}
</style>

Chat Window 구성 요소

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

미리보기 열기

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden font-sans">

  <!-- Chat Header -->
  <div class="w-full bg-purple-600 dark:bg-purple-800 p-4 flex items-center justify-between shadow-md">
    <div class="flex items-center">
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-white animate-pulse-slow" />
      <h2 class="text-white text-lg font-semibold">Customer Support</h2>
    </div>
    <div class="relative">
      <div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0 ring-2 ring-purple-600 dark:ring-purple-800 animate-ping-slow"></div>
      <div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0"></div>
    </div>

  </div>

  <!-- Chat Messages -->
  <div class="flex-1 p-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-gray-100 dark:scrollbar-track-gray-900">

    <!-- Receiver Message -->
    <div class="flex items-end justify-start animate-fade-in-down">
      <img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
      <div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
        <p>Hello! How can I help you today?</p>
        <span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:00 AM</span>
      </div>
    </div>

    <!-- Sender Message -->
    <div class="flex items-end justify-end animate-fade-in-up">
      <div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-right hover:scale-105">
        <p>I'm looking for information about my recent order, #12345.</p>
        <span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">10:02 AM</span>
      </div>
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
    </div>

    <!-- Receiver Message with Image -->
    <div class="flex items-end justify-start animate-fade-in-down">
      <img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
      <div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
        <p>Certainly! Could you please provide your full name and the email address associated with the order?</p>
        <img src="https://picsum.photos/id/237/200/150" alt="Order details" class="mt-2 rounded-md transition-all duration-300 ease-in-out transform hover:scale-105" />
        <span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:05 AM</span>
      </div>
    </div>

    <!-- Sender Message with Typing Indicator -->
    <div class="flex items-end justify-end animate-fade-in-up">
      <div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transform origin-bottom-right">
        <div class="flex items-center space-x-1">
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot"></span>
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-200"></span>
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-400"></span>
        </div>
        <span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">Typing...</span>
      </div>
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
    </div>

  </div>

  <!-- Message Input -->
  <div class="bg-cyan-500 dark:bg-cyan-700 p-4 flex items-center shadow-lg">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out transform focus:scale-105" />
    <button class="ml-4 bg-blue-500 dark:bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 transform hover:scale-110 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
        <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.543 60.543 0 0018.445-8.986.75.75 0 000-1.218A60.543 60.543 0 003.478 2.405z" />
      </svg>
    </button>
  </div>

</div>

<!-- Custom Tailwind CSS for microinteractions and scrollbar styling -->
<style>
  @keyframes pulse-slow {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }

  @keyframes ping-slow {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    100% {
      transform: scale(2.2);
      opacity: 0;
    }
  }

  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes slide-in-bottom {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-in-bottom {
    animation: slide-in-bottom 0.5s ease-out;
  }

  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out;
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out;
  }

  @keyframes bounce-dot {
    0%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-5px);
    }
  }

  .animate-bounce-dot {
    animation: bounce-dot 1.4s infinite ease-in-out both;
  }

  .animation-delay-200 {
    animation-delay: 0.2s;
  }

  .animation-delay-400 {
    animation-delay: 0.4s;
  }

  /* Custom Scrollbar Styles */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc; /* thumb track */
  }

  .dark .scrollbar-thin {
    scrollbar-color: #4a5568 #1a202c; /* thumb track for dark mode */
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: #f7fafc; /* Light mode track */
    border-radius: 10px;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-track {
    background: #1a202c; /* Dark mode track */
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #cbd5e0; /* Light mode thumb */
    border-radius: 10px;
    border: 2px solid #f7fafc; /* Light mode border around thumb */
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #4a5568; /* Dark mode thumb */
    border: 2px solid #1a202c; /* Dark mode border around thumb */
  }
</style>

레트로 파스텔 채팅 창

파스텔 색상, 반응형 디자인, Tailwind CSS를 사용하는 다크 모드를 지원하는 레트로 테마의 채팅 창 구성 요소입니다.

미리보기 열기

                <div class="flex flex-col h-screen antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="flex flex-row h-full w-full overflow-x-hidden">
    <div class="flex flex-col flex-auto h-full p-6">
      <div class="flex flex-col flex-auto flex-shrink-0 rounded-lg bg-gray-200 dark:bg-gray-800 h-full p-4">
        <div class="flex flex-col h-full overflow-x-auto mb-4">
          <div class="flex flex-col h-full">
            <div class="grid grid-cols-12 gap-y-2">
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Hey How are you doing today?</div>
                  </div>
                </div>
              </div>
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>
                      Wow, I'm loving this retro chat window design! The pastel colors are so calming.
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>I'm fine living large</div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Looks like something out of a late 80s computer interface. Totally tubular!</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-700 w-full px-4"
        >
          <div class="flex-grow ml-4">
            <div class="relative w-full">
              <input
                type="text"
                class="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10 dark:bg-gray-800 dark:text-white"
              />
            </div>
          </div>
          <div class="ml-4">
            <button
              class="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
            >
              <span>Send</span>
              <span class="ml-2">
                <svg
                  class="w-4 h-4 transform rotate-45 -mt-px"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Chat Window 구성 요소

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

미리보기 열기

                <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>

간단한 브루탈리스트 채팅 창

브루탈리즘 심플 그레이스케일 채팅 창 구성 요소는 다크 모드와 반응형 디자인으로 블로그 콘텐츠 소비를 위한 것입니다.

미리보기 열기

                <div class="flex flex-col h-screen bg-white dark:bg-black border border-black dark:border-white">
  <!-- Chat Header -->
  <div class="flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 border-b border-black dark:border-white">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <h2 class="text-lg font-bold text-black dark:text-white">Simple Chat</h2>
    </div>
    <button class="text-black dark:text-white font-bold">X</button>
  </div>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Hey, this is a simple message.</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm">This is a reply message.</p>
      </div>
    </div>

    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Another simple incoming message to show the scroll.</p>
      </div>
    </div>

      <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm max-w-xs">And a longer outgoing message to test wrapping and responsiveness. It should wrap when the screen is smaller.</p>
      </div>
    </div>

  </div>

  <!-- Chat Footer -->
  <div class="flex p-4 bg-gray-200 dark:bg-gray-800 border-t border-black dark:border-white">
    <input type="text" placeholder="Type a message..." class="flex-1 p-2 rounded-lg border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
    <button class="ml-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-bold rounded-lg border border-black dark:border-white">Send</button>
  </div>
</div>

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>

카테고리