G-Loot DS — brawl card secondary active

by Augustin Hiebel

HTML

<div className="card-brawl card-secondary is-active">
  <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">Partaking</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="flex gap-1 items-center text-sm text-ui-300 whitespace-nowrap">
            <span className="mr-1">Time Left:</span>
            <span className="icon icon-clock" />
            <span>23H</span>
            <span>19M</span>
            <span>13S</span>
          </div>
        </div>
      </div>
    </div>
    <div className="card-meta">
      <div className="flex-1 flex items-center gap-4">
        <div className="flex-none avatar avatar-circle avatar-xs">
          <div>
            <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_1.jpg" />
          </div>
        </div>
        <div className="infobanner is-active">
          <div className="flex gap-2 infobanner-front">
      ...