G-Loot DS — radio, checkbox with images

by Augustin Hiebel

HTML

<div className="form-group flex flex-wrap justify-center gap-4">
  <label className="form-checkbox form-image">
    <input type="checkbox" name="game-1" />
    <span className="sr-only">Valorant</span>
    <div className="w-24 h-32 lg:w-32 lg:h-48 bg-cover rounded-md" style={{backgroundImage: `url(https://res.cloudinary.com/gloot/image/upload/v1644677000/Marketing/202109_gloot2/Game_cover_Valorant.jpg)`}} />
  </label>
  <label className="form-checkbox form-image">
    <input type="checkbox" name="game-2" />
    <span className="sr-only">Apex Legends</span>
    <div className="w-24 h-32 lg:w-32 lg:h-48 bg-cover rounded-md" style={{backgroundImage: `url(https://res.cloudinary.com/gloot/image/upload/v1644676999/Marketing/202109_gloot2/Game_cover_Apex_Legends.jpg)`}} />
  </label>
  <label className="form-checkbox form-image">
    <input type="checkbox" name="game-3" />
    <span className="sr-only">PUBG: BATTLEGROUNDS</span>
    <div className="w-24 h-32 lg:w-32 lg:h-48 bg-cover rounded-md" style={{backgroundImage: `url(https://res.cloudinary.com/gloot/image/upload/v1644676999/Marketing/202109_gloot2/Game_cover_PUBG_Battlegrounds.jpg)`}} />
  </label>
  <label className="form-checkbox form-image">
    <input type="checkbox" name="game-4" />
    <span className="sr-only">CSGO</span>
    <div className="w-24 h-32 lg:w-32 lg:h-48 bg-cover rounded-md" style={{backgroundImage: `url(https://res.cloudinary.com/gloot/image/upload/v1644676999/Marketing/202109_gloot2/Game_cover_CSGO.jpg)`}} />
  </label>
  <label className="form-checkbox form-image">
    <input type="checkbox" name="game-5" />
    <span className="sr-only">Rocket League</span>
    <div className="w-24 h-32 lg:w-32 lg:h-48 bg-cover rounded-md" style={{backgroundImage: `url(https://res.cloudinary.com/gloot/image/upload/v1644676999/Marketing/202109_gloot2/Game_cover_Rocket_League.jpg)`}} />
  </label>
  <label className="form-checkbox form-image">
    <input type="checkbox" name="game-6" />
    <span...