G-Loot DS — brawl card secondary responsive horizontal

by Augustin Hiebel

HTML

<div className="card-brawl card-secondary lg:card-horizontal">
   <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 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 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...