G-Loot DS — brawl card secondary structure

by Augustin Hiebel

HTML

<div className="card-brawl card-secondary">
  <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">Ongoing</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 text-sm gap-1 items-center whitespace-nowrap">
            <span className="text-ui-300 mr-1">Time Left:</span>
            <span className="icon icon-clock text-ui-300" />
            <Countdown separator={" "}
                            hasDays={false}
                            hasHours={true}
                            hasMinutes={true}
                            hasSeconds={true}
                            targetDate={dateTimeAfterThreeDays}
                            hasLabels={true}
                            labelsAbbr={true}
                            labelClassName=" text-base mr-1 block" className="text-ui-300 uppercase text-sm gap-1" />
          </div>
        </div>
      </div>
    </div>
    <div className="card-meta">
      <div...