G-Loot DS — chat group (self)

by Augustin Hiebel

HTML

<ul class="chat-main">
  <li class="chat-group is-owner">
    <div class="chat-messages">
      <span class="leading-none uppercase text-sm">You</span>
      <div tabindex="1" class="chat-message">
        <div class="chat-bubble ">
          <div>Welcome aboard <a classname="font-bold" href="#">@James</a> 👋</div>
          <div class="chat-reactions">
            <div class="inline-block cursor-pointer">
              <div class="chat-reaction "><span>❤️</span><span>2</span></div>
            </div>
            <div class="inline-block cursor-pointer">
              <div class="chat-reaction "><span>👏</span><span>1</span></div>
            </div>
            <div class="chat-react">
              <div class="dropdown dropdown-bottom dropdown-end dropdown-closed" data-tooltip="React">
                <button type="button" class="rounded-full">
                  <span class="icon icon-smile"></span>
                </button>
                <div tabindex="0" class="dropdown-content bg-ui-500 p-1">
                  <ul class="menu menu-secondary menu-rounded menu-horizontal">
                    <li>
                      <a><span><span class="text-xl">❤️</span></span></a>
                    </li>
                    <li>
                      <a><span><span class="text-xl">👍</span></span></a>
                    </li>
                    <li>
                      <a><span><span class="text-xl">😂</span></span></a>
                    </li>
                    <li>
                      <a><span><span class="text-xl">👏</span></span></a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chat-actions">
          <div class="chat-action-hidden" data-tooltip="More">
            <div class="dropdown dropdown-center">
              <label tabindex="0" class="button button-ghost rounded-full">
                <span class="icon icon-dots-vertical"></span>
  ...