Chat Window 구성 요소

<div class="flex flex-col h-screen bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-800 dark:to-gray-900">
  <header class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Chat Window</h1>
  </header>

  <div class="flex-1 p-4 overflow-y-auto">
    <!-- Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        Hi there! This is an example of an incoming message in 3D.
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And this is an outgoing message, also with a cool 3D effect!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        The pastel colors give it a soft and inviting feel.
      </div>
    </div>

    <!-- Another Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And it's simple enough for a portfolio showcase!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

  </div>

  <footer class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <div class="flex">
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:focus:ring-indigo-600 shadow-inner">
      <button class="ml-3 px-6 py-3 bg-indigo-400 dark:bg-indigo-600 text-white rounded-lg font-semibold shadow-md hover:bg-indigo-500 dark:hover:bg-indigo-700 transition-colors duration-300">Send</button>
    </div>
  </footer>
</div>