G-Loot DS — daily reward structure

by Augustin Hiebel

HTML

<ul className="dailyreward">
  <li className="is-active">
    <div className="mx-auto flip">
      <div className="flip-front">
        <span className="text-sm text-ui-300 uppercase">Day 1</span>
        <img src="https://res.cloudinary.com/gloot/image/upload/v1653393860/Marketing/2022_prototype/CurrencyRewards/Reward-coin-unique.png" alt="Day 1" />
      </div>
      <div className="flip-back">
        <span className="text-sm text-ui-400 uppercase">Day 1</span>
        <div className="checkmark checkmark-sm">
          <i></i>
        </div>
      </div>
    </div>
  </li>
  <li className="">
    <div className="mx-auto flip">
      <div className="flip-front">
        <span className="text-sm text-ui-300 uppercase">Day 2</span>
        <img src="https://res.cloudinary.com/gloot/image/upload/v1653391336/Marketing/2022_prototype/CurrencyRewards/Reward-token-unique.png" alt="Day 2" />
      </div>
      <div className="flip-back">
        <span className="text-sm text-ui-400 uppercase">Day 2</span>
        <div className="checkmark checkmark-sm">
          <i></i>
        </div>
      </div>
    </div>
  </li>
  <li className="">
    <div className="mx-auto flip">
      <div className="flip-front">
        <span className="text-sm text-ui-300 uppercase">Day 3</span>
        <img src="https://res.cloudinary.com/gloot/image/upload/v1653393860/Marketing/2022_prototype/CurrencyRewards/Reward-coin-unique.png" alt="Day 3" />
      </div>
      <div className="flip-back">
        <span className="text-sm text-ui-400 uppercase">Day 3</span>
        <div className="checkmark checkmark-sm">
          <i></i>
        </div>
      </div>
    </div>
  </li>
  <li className="">
    <div className="mx-auto flip">
      <div className="flip-front">
        <span className="text-sm text-ui-300 uppercase">Day 4</span>
        <img src="https://res.cloudinary.com/gloot/image/upload/v1654171544/Marketing/2022_prototype/CurrencyRewards/Reward-centered-coin-small.png" alt="Day 4" />
...