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

Chat Window 구성 요소

사이버펑크에서 영감을 받은 미학과 자연스러운 흙색을 갖춘 간단하고 반응이 빠른 채팅 창 구성 요소로, 포럼 및 커뮤니티 플랫폼용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<div class="flex flex-col h-full w-full max-w-lg mx-auto bg-warm-gray-900 border border-warm-gray-700 rounded-lg shadow-lg overflow-hidden dark:bg-zinc-900 dark:border-zinc-700 md:max-w-xl lg:max-w-2xl font-mono">

  <!-- Chat Header -->
  <div class="flex items-center justify-between p-4 bg-warm-gray-800 border-b border-warm-gray-600 dark:bg-zinc-800 dark:border-zinc-600">
    <div class="flex items-center space-x-3">
      <div class="w-3 h-3 rounded-full bg-lime-500 animate-pulse"></div>
      <h2 class="text-lg font-bold text-lime-400">System Chat</h2>
    </div>
    <div class="flex space-x-2">
      <button class="p-1 text-warm-gray-400 hover:text-lime-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 rounded-md">
        <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
  </div>

  <!-- Chat Messages Area -->
  <div class="flex-1 p-4 overflow-y-auto space-y-4 text-sm scrollbar-thin scrollbar-thumb-lime-600 scrollbar-track-warm-gray-700 dark:scrollbar-thumb-lime-700 dark:scrollbar-track-zinc-800">

    <!-- Incoming Message -->
    <div class="flex items-start">
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
      <div>
        <div class="flex items-baseline space-x-2 mb-1">
          <span class="font-semibold text-lime-400">Neo_Matrix</span>
          <span class="text-xs text-warm-gray-500">10:30 AM</span>
        </div>
        <div class="p-3 bg-warm-gray-700 text-warm-gray-200 rounded-br-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-zinc-700 dark:text-zinc-200">
          Hey, anyone online for a quick data-stream?
        </div>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-start justify-end">
      <div>
        <div class="flex items-baseline justify-end space-x-2 mb-1">
          <span class="text-xs text-warm-gray-500">10:31 AM</span>
          <span class="font-semibold text-lime-400">You</span>
        </div>
        <div class="p-3 bg-lime-700 text-white rounded-bl-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-lime-800">
          Affirmative. Ready to link up.
        </div>
      </div>
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 ml-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Your Avatar">
    </div>

    <!-- Incoming Message with Image -->
    <div class="flex items-start">
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
      <div>
        <div class="flex items-baseline space-x-2 mb-1">
          <span class="font-semibold text-lime-400">Neo_Matrix</span>
          <span class="text-xs text-warm-gray-500">10:35 AM</span>
        </div>
        <div class="p-3 bg-warm-gray-700 text-warm-gray-200 rounded-br-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-zinc-700 dark:text-zinc-200">
          Check out this new system schematic.
          <img src="https://picsum.photos/400/250" alt="System Schematic" class="mt-2 w-full max-w-sm rounded-md border border-lime-600 object-cover">
        </div>
      </div>
    </div>

    <!-- Outgoing Message with longer text -->
    <div class="flex items-start justify-end">
        <div>
            <div class="flex items-baseline justify-end space-x-2 mb-1">
                <span class="text-xs text-warm-gray-500">10:40 AM</span>
                <span class="font-semibold text-lime-400">You</span>
            </div>
            <div class="p-3 bg-lime-700 text-white rounded-bl-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-lime-800 max-w-xs md:max-w-sm">
                Intriguing. The flow seems optimized for neural processing. What's the projected efficiency gain on this version?
            </div>
        </div>
        <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 ml-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Your Avatar">
    </div>

  </div>

  <!-- Chat Input Area -->
  <div class="flex items-center p-4 bg-warm-gray-800 border-t border-warm-gray-600 dark:bg-zinc-800 dark:border-zinc-600">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 bg-warm-gray-900 border border-warm-gray-600 rounded-lg text-warm-gray-100 placeholder-warm-gray-400 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:bg-zinc-900 dark:border-zinc-600 dark:text-zinc-100 dark:placeholder-zinc-400">
    <button class="ml-3 p-3 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-offset-2 focus:ring-offset-warm-gray-800 dark:focus:ring-offset-zinc-800">
      <svg class="w-5 h-5 -rotate-45" 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>
    </button>
  </div>
</div>

<style>
/* Custom scrollbar for better visual integration with Cyberpunk theme */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--tw-lime-600) var(--tw-warm-gray-700);
}

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

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-warm-gray-700);
  border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tw-lime-600);
  border-radius: 4px;
  border: 2px solid var(--tw-warm-gray-700);
}

/* Dark mode adjustments for scrollbar */
.dark .scrollbar-thin {
  scrollbar-color: var(--tw-lime-700) var(--tw-zinc-800);
}

.dark .scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-zinc-800);
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tw-lime-700);
  border: 2px solid var(--tw-zinc-800);
}

/* Define custom colors for better theming (optional, could be in tailwind config) */
:root {
  --tw-warm-gray-900: #1a1a1a;
  --tw-warm-gray-800: #262626;
  --tw-warm-gray-700: #3f3f3f;
  --tw-warm-gray-600: #525252;
  --tw-warm-gray-500: #737373;
  --tw-warm-gray-400: #a3a3a3;
  --tw-warm-gray-200: #e5e5e5;
  --tw-warm-gray-100: #f5f5f5;
  --tw-lime-500: #84cc16;
  --tw-lime-600: #65a30d;
  --tw-lime-700: #4d7c0f;
  --tw-lime-400: #a3e635;
}

/* Tailwind JIT or custom config can define these */
/* Example for dark mode zinc colors */
.dark {
  --tw-zinc-900: #18181b;
  --tw-zinc-800: #27272a;
  --tw-zinc-700: #3f3f46;
  --tw-zinc-600: #52525b;
  --tw-zinc-500: #71717a;
  --tw-zinc-400: #a1a1aa;
  --tw-zinc-200: #e4e4e7;
  --tw-zinc-100: #f4f4f5;
  --tw-lime-800: #3f6212;
  --tw-lime-700: #4d7c0f; /* Reusing for dark scrollbar thumb */
}

</style>

관련 구성 요소

Chat Window 구성 요소

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

열다

3D 디자인, 응답성 및 다크 모드가 있는 채팅 창 구성 요소

Tailwind CSS를 사용하여 3D 디자인 요소와 어두운 테마를 지원하는 반응형 채팅 창 구성 요소입니다. 자리 표시자 아바타 및 이미지가 포함됩니다.

열다

Chat Window 구성 요소

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

열다