Chat Window 구성 요소

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