G-Loot DS — brawl card secondary inactive

by Augustin Hiebel

HTML

<div className="card-brawl card-secondary is-inactive">
  <div className="card-image">
    <div className="card-image-content">
      <div className="rounded bg-ui-800/90 p-0.5 pr-3 flex gap-2 items-center text-sm text-ui-200">
        <div className="ml-0 p-1 border border-ui-700 rounded-sm bg-gradient-to-b from-ui-900 to-ui-900/50 flex items-center justify-center">
          <span className="icon text-xl icon-game-pubg-symbol text-game-pubg" />
        </div>
        <span>Competitive</span>
        <span className="card-status">Finished</span>
      </div>
    </div>
  </div>
  <div className="card-content">
    <div className="card-body">
      <div>
        <h2 className="text-3xl mb-2 uppercase">
          Competitive Brawl
        </h2>
        <div className="flex gap-4 items-center">
          <div className="flex items-center whitespace-nowrap gap-2">
            <img className="h-6" src="https://res.cloudinary.com/gloot/image/upload/v1658134262/Marketing/2022_prototype/CurrencyRewards/Reward-cropped-coin-unique.webp" width="auto" height="auto" alt="" />
            <span className="font-bold text-gold-500 text-sm">
              5k - 30k
            </span>
          </div>
          <div className="text-sm text-ui-300">
            This competition has ended
          </div>
        </div>
      </div>
    </div>
    <div className="card-meta">
      <div className="flex items-center gap-2">
        <div className="avatar-group -space-x-2">
          <div className="avatar avatar-circle avatar-tiny">
            <div>
              <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_1.jpg" />
            </div>
          </div>
          <div className="avatar avatar-circle avatar-tiny">
            <div>
              <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_2.jpg" />
            </div>
       ...