Skip to content

Chat

Text Chat

城田 亜利沙
オッケー 👍 13時からオンラインのミーティングなのでそのまえにちょっと話そうか 😃
html
<div class="container max-w-2xl">
  <div class="mb-4 flex">
    <div class="jumpu-avatar mr-4 flex-shrink-0">
      <a href="#">
        <img src="../assets/avatar-1.jpg" alt="城田 亜利沙" />
      </a>
    </div>
    <div>
      <div class="mb-2 flex items-center">
        <div class="mr-4 font-bold"><a href="#">城田 亜利沙</a></div>
        <div class="text-xs">9:15</div>
      </div>
      <div class="jumpu-balloon">
        オッケー 👍
        13時からオンラインのミーティングなのでそのまえにちょっと話そうか 😃
      </div>
    </div>
  </div>
</div>

Share

城田 亜利沙
つくり・つたえるUIデザイン | 株式会社ツクロア
人の行動と心を理解しプロジェクトの成長を支援するUIデザイン・アドバイザー
html
<div class="container max-w-2xl">
  <div class="mb-4 flex">
    <div class="jumpu-avatar mr-4 shrink-0">
      <a href="#">
        <img src="../assets/avatar-1.jpg" alt="城田 亜利沙" />
      </a>
    </div>
    <div>
      <div class="mb-2 flex items-center">
        <div class="mr-4 font-bold"><a href="#">城田 亜利沙</a></div>
        <div class="text-xs">9:15</div>
      </div>
      <div
        class="flex items-center overflow-hidden rounded-lg border border-gray-300"
      >
        <a href="#" class="h-32 w-32 shrink-0">
          <img
            src="../assets/cover.png"
            alt=""
            class="h-full w-full object-cover"
          />
        </a>
        <div class="px-4 py-3">
          <a href="#" class="mb-1 block font-bold hover:underline"
            >つくり・つたえるUIデザイン | 株式会社ツクロア</a
          >
          <div class="mb-2 text-sm text-gray-700">
            人の行動と心を理解しプロジェクトの成長を支援するUIデザイン・アドバイザー
          </div>
          <div class="flex items-center text-xs leading-none text-gray-500">
            <img
              src="../assets/favicon.example.ico"
              class="mr-1 inline h-3 w-3"
              alt=""
            />
            <a href="#">tuqulore.com</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>