G-Loot DS — list item as table

by Augustin Hiebel

HTML

<ul>
  <li className="item">
    <div className="item-image">
      <div className="chip chip-reward chip-gold chip-xs chip-inverted h-6 w-6 text-xs">
        <span>1</span>
      </div>
    </div>
    <div className="item-image">
      <div className="avatar avatar-tiny">
        <div>
          <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_9.jpg" />
        </div>
      </div>
    </div>
    <div className="item-body">
      <div className="item-title">Croc Esports</div>
    </div>
    <div className="item-body text-center text-sm text-ui-300">
      54
    </div>
    <div className="item-body text-center flex-2 hidden xl:block">
      <div className="flex justify-center">
        <div className="flex justify-center items-center px-3 gap-2 bg-gradient-to-b from-ui-900/50 to-ui-900/0 rounded-full">
          <div className="flex items-center">
            <img src="https://res.cloudinary.com/gloot/image/upload/v1653391336/Marketing/2022_prototype/CurrencyRewards/Reward-centered-coin-small.png" width="34" height="auto" />
            <span className="text-sm text-gold-500">16350</span>
          </div>
          <div className="flex items-center gap-1">
            <img src="https://res.cloudinary.com/gloot/image/upload/v1654152412/Marketing/2022_prototype/CurrencyRewards/Reward-centered-ticket-unique.png" width="34" height="auto" />
            <span className="text-sm text-bronze-500">1</span>
          </div>
        </div>
      </div>
    </div>
    <div className="item-actions">
      <div>
        <button className="button button-sm button-secondary rounded-full tooltip tooltip-left" data-tooltip="View details">
          <span className="icon icon-a-chart" />
        </button>
      </div>
    </div>
  </li>
</ul>