G-Loot DS — brawl card secondary with overlay

by Augustin Hiebel

HTML

<div className="card-brawl card-secondary">
   <div className="card-overlay">
     <div>
       <div className="font-headings text-2xl font-bold italic text-ui-100">
         You won a prize!
       </div>
       <button type="button" className="button button-claim is-shining">
         <span>Claim reward</span>
       </button>
     </div>
     <img src="https://res.cloudinary.com/gloot/image/upload/v1668945075/Marketing/2022_prototype/card-rewarddoverlay-bg.png" alt="" />
   </div>
   <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="text-sm text-ui-300">
             This competition has ended
           </div>
           <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">
               10 000
             </span>
           </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...