G-Loot DS — chat group (others)

by Augustin Hiebel

HTML

<ul classname="chat-main">
  <li classname="chat-group">
    <div classname="chat-author">
      <div classname="avatar avatar-circle avatar-sm">
        <div>
          <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_1.jpg" alt="avatar" />
        </div>
      </div>
      <time datetime="2008-02-14 20:00">Message sent 1.22pm</time>
    </div>
    <div classname="chat-messages">
      <span classname="leading-none uppercase text-sm">Kes2Band</span>
      <div tabindex="1" classname="chat-message">
        <div classname="chat-bubble ">
          <div>Welcome aboard <a classname="font-bold" href="#">@James</a> 👋</div>
          <div classname="chat-reactions">
            <div classname="inline-block cursor-pointer">
              <div classname="chat-reaction"><span>❤️</span><span>2</span></div>
            </div>
            <div classname="inline-block cursor-pointer">
              <div classname="chat-reaction"><span>👏</span><span>1</span></div>
            </div>
            <div classname="inline-block cursor-pointer">
              <div classname="chat-reaction"><span>😂</span><span>1</span></div>
            </div>
            <div classname="chat-react">
              <div classname="dropdown dropdown-bottom dropdown-start dropdown-closed" data-tooltip="React"><button type="button" classname="rounded-full"><span classname="icon icon-smile"></span></button>
                <div tabindex="0" classname="dropdown-content bg-ui-500 p-1">
                  <ul classname="menu menu-secondary menu-rounded menu-horizontal">
                    <li><a><span><span classname="text-xl">❤️</span></span></a></li>
                    <li><a><span><span classname="text-xl">👍</span></span></a></li>
                    <li><a><span><span classname="text-xl">😂</span></span></a></li>
                    <li><a><span><span classname="text-xl">👏</span></span></a></li>
                  </ul>
        ...