G-Loot DS — tabs rank

by Augustin Hiebel

HTML

<ul className="tabs tabs-rank">
  <li className="tab-bronze">
    <a className="is-active">
      <div>
        <div>
          <span className="icon text-4xl icon-rank-bronze"></span>
          <span className="font-headings text-2xl uppercase italic">Bronze</span>
        </div>
      </div>
    </a>
  </li>
  <li className="tab-silver">
    <a>
      <div>
        <div><span className="icon text-4xl icon-rank-silver"></span>
          <span className="font-headings text-2xl uppercase italic">Silver</span></div>
        <figure className="avatar avatar-circle avatar-xs">
          <div>
            <img src="https://res.cloudinary.com/gloot/image/upload/v1654063975/Marketing/2022_prototype/DummyContent/teams/teamlogo_CrocEsports.png" />
          </div>
          <i className="radar"></i>
        </figure>
      </div>
    </a>
  </li>
  <li className="tab-gold">
    <a>
      <div>
        <div>
          <span className="icon text-4xl icon-rank-gold"></span>
          <span className="font-headings text-2xl uppercase italic">Gold</span>
        </div>
      </div>
    </a>
  </li>
  <li className="tab-platinum">
    <a>
      <div>
        <div>
          <span className="icon text-4xl icon-rank-platinum"></span>
          <span className="font-headings text-2xl uppercase italic">Platinum</span>
        </div>
      </div>
    </a>
  </li>
  <li className="tab-diamond">
    <a>
      <div>
        <div>
          <span className="icon text-4xl icon-rank-diamond"></span>
          <span className="font-headings text-2xl uppercase italic">Diamond</span>
        </div>
      </div>
    </a>
  </li>
</ul>