G-Loot DS — tabs colored

by Augustin Hiebel

HTML

<div className="relative">
  <ul claclassNamess="tabs tabs-colored">
    <li>
      <button className="button-stretch" style={{ "--color" : "var(--color-game-apexlegends)" }}>
        <span className="icon text-xl icon-game-apexlegends-symbol"></span><span><span>Apex Legends</span></span>
      </button>
    </li>
    <li>
      <button className="button-stretch" style={{ "--color" : "var(--color-game-dota2)" }}>
        <span className="icon text-xl icon-game-dota2-symbol"></span><span><span>Dota 2</span></span>
      </button>
    </li>
    <li>
      <button className="button-stretch" style={{ "--color" : "var(--color-game-pubg)" }}>
        <span className="icon text-xl icon-game-pubg-symbol"></span><span><span>PUBG</span></span>
      </button>
    </li>
    <li>
      <button className="button-stretch" style={{ "--color" : "var(--color-game-rocketleague)" }}>
        <span className="icon text-xl icon-game-rocketleague-symbol"></span><span><span>Rocket League</span></span>
      </button>
    </li>
    <li>
      <button className="button-stretch is-active" style={{ "--color" : "var(--color-game-valorant)" }}>
        <span className="icon text-xl icon-game-valorant-symbol"></span><span><span>Valorant</span></span>
      </button>
    </li>
    <li>
      <button className="button-stretch" style={{ "--color" : "var(--color-game-leagueoflegends)" }}>
        <span className="icon text-xl icon-game-leagueoflegends-symbol"></span><span><span>League of Legends</span></span>
      </button>
    </li>
  </ul>
  <span className="tabs-colored-shadow" style={{"--color": "var(--color-game-valorant)" "}} />
</div>