Chat Box

<!--
  Day 46: Chat Box

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Chat Box -->
<div
  class="relative mx-auto w-full max-w-sm rounded-xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="flex w-full flex-col">
    <!-- Chat Header -->
    <div
      class="flex items-center justify-between border-b border-zinc-200/50 px-6 py-5"
    >
      <div class="flex items-center gap-3">
        <div class="relative rounded-full bg-zinc-100">
          <div
            class="absolute -right-0.5 -bottom-0.5 size-3 rounded-full border-2 border-white bg-emerald-500"
          ></div>
          <img
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80"
            alt="User Avatar"
            class="aspect-square size-10 rounded-2xl object-cover"
          />
        </div>
        <div>
          <h3 class="leading-tight font-semibold">Emily Parker</h3>
          <p class="mt-1 text-xs font-medium text-zinc-500">UX Designer</p>
        </div>
      </div>
      <button
        type="button"
        class="inline-flex items-center justify-center gap-2 rounded-lg border border-secondary-200 bg-white p-2 text-sm leading-5 font-semibold text-secondary-800 hover:border-secondary-300 hover:text-secondary-900 hover:shadow-xs focus:ring-3 focus:ring-secondary-300/25 active:border-secondary-200 active:shadow-none"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-plus inline-block size-4"
        >
          <path
            d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
          />
        </svg>
        <span class="sr-only">New message</span>
      </button>
    </div>
    <!-- END Chat Header -->

    <!-- Chat Messages -->
    <div class="flex flex-col gap-4 overflow-y-auto p-6">
      <!-- User Message -->
      <div class="flex flex-col items-end gap-2 sm:flex-row">
        <div
          class="max-w-full rounded-2xl rounded-bl-none bg-zinc-100 px-4 py-3 text-sm sm:max-w-[75%]"
        >
          <p>Hi there! How's the project coming along?</p>
        </div>
        <span class="text-xs text-zinc-400">10:24 AM</span>
      </div>

      <!-- My Message -->
      <div
        class="flex flex-col-reverse items-end justify-end gap-2 sm:flex-row"
      >
        <span class="text-xs text-zinc-400">10:26 AM</span>
        <div
          class="max-w-full rounded-2xl rounded-br-none bg-zinc-700 px-4 py-3 text-sm text-white sm:max-w-[75%]"
        >
          <p>
            Hey Sarah! It's going well. I've just finished the wireframes for
            the new dashboard.
          </p>
        </div>
      </div>

      <!-- User Message -->
      <div class="flex flex-col items-end gap-2 sm:flex-row">
        <div
          class="max-w-full rounded-2xl rounded-bl-none bg-zinc-100 px-4 py-3 text-sm sm:max-w-[75%]"
        >
          <p>
            That's great! Can you share them with me? I'd love to take a look
            and provide some feedback.
          </p>
        </div>
        <span class="text-xs text-zinc-400">10:30 AM</span>
      </div>

      <!-- My Message -->
      <div
        class="flex flex-col-reverse items-end justify-end gap-2 sm:flex-row"
      >
        <span class="text-xs text-zinc-400">10:32 AM</span>
        <div
          class="max-w-full rounded-2xl rounded-br-none bg-zinc-700 px-4 py-3 text-sm text-white sm:max-w-[75%]"
        >
          <p>
            Sure thing! I'll send them over right away. Do you want me to
            include the user flow diagrams as well?
          </p>
        </div>
      </div>

      <!-- User Message -->
      <div class="flex flex-col items-end gap-2 sm:flex-row">
        <div
          class="max-w-full rounded-2xl rounded-bl-none bg-zinc-100 px-4 py-3 text-sm sm:max-w-[75%]"
        >
          <p>Yes, that would be perfect! Thanks for being so thorough.</p>
        </div>
        <span class="text-xs text-zinc-400">10:35 AM</span>
      </div>
    </div>
    <!-- END Chat Messages -->

    <!-- Chat Input -->
    <div class="border-t border-zinc-200/50 px-6 py-5">
      <form onsubmit="return false;">
        <input
          type="text"
          placeholder="Type a message..."
          class="block w-full rounded-lg border border-zinc-200 bg-white px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
        />
      </form>
    </div>
    <!-- END Chat Input -->
  </div>
</div>
<!-- END Chat Box -->