G-Loot DS — reward ladder overlay not claimed

by Augustin Hiebel

HTML

<div class="relative">
  <div class="absolute inset-0 z-50 backdrop-blur-sm bg-gradient-radial from-ui-900/90 via-ui-900/90 to-ui-900/60 gap-2 flex items-center justify-center overflow-hidden">
    <div class="relative z-10 flex flex-col items-center justify-center gap-3 animate-slide-in-bottom animate-delay" style="--delay: calc(1 * 0.05s);">
      <h2>2 rewards available</h2>
      <button type="button" class="button button-claim"><span>Claim rewards</span></button>
    </div>
    <div class="absolute z-0 inset-0 pointer-events-none">
      <img class="absolute top-10 left-[calc(50%-300px)] -rotate-[33deg]" src="https://res.cloudinary.com/gloot/image/upload/v1660128022/Marketing/2022_prototype/3Dobjects/3dobject-gift-1.webp" width="100" height="auto" alt="" />
      <img class="absolute bottom-10 left-[calc(50%-200px)] -rotate-[120deg]" src="https://res.cloudinary.com/gloot/image/upload/v1660128022/Marketing/2022_prototype/3Dobjects/3dobject-gift-2.webp" width="60" height="auto" alt="" />
      <img class="absolute bottom-24 right-[calc(50%-250px)] rotate-[45deg]" src="https://res.cloudinary.com/gloot/image/upload/v1660128022/Marketing/2022_prototype/3Dobjects/3dobject-gift-1.webp" width="50" height="auto" alt="" />
      <img class="absolute top-12 right-[calc(50%-350px)] rotate-[33deg]" src="https://res.cloudinary.com/gloot/image/upload/v1660128022/Marketing/2022_prototype/3Dobjects/3dobject-gift-2.webp" width="110" height="auto" alt="" />
      <div class="absolute z-0 rounded-full bg-gradient-to-b from-main/25 via-blue-700/75 to-main/0 w-32 h-24 blur-xl transform-gpu left-[calc(50%-4rem)] top-[calc(50%+1.5rem)]" />

    </div>
  </div>
  <div class="ladder-container scrollbar-desktop" style="--max: 10; --step: 1;">
    ...
  </div>
</div>