<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="gym-card">
  <div class="gym-ring">
    <b>
      34
    </b>
    <span>
      MIN
    </span>
  </div>
  <div>
    <small>
      UP NEXT
    </small>
    <h3>
      Core flow
    </h3>
    <p>
      Low impact · 4.8 kcal
    </p>
  </div>
</article>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.gym-card{display:flex;align-items:center;gap:15px;width:260px;padding:17px;border-radius:19px;background:#202c36;color:#f2f8fc;font-family:Arial;box-shadow:0 10px 18px #17232d3b}.gym-ring{position:relative;display:grid;place-items:center;width:64px;height:64px;border:6px solid #ff8175;border-left-color:#65e0c5;border-radius:50%;animation:gym-turn 2.5s linear infinite}.gym-ring b{font-size:20px}.gym-ring span{margin-top:-19px;font-size:7px;font-weight:800;letter-spacing:1px}.gym-card small{font-size:9px;font-weight:800;color:#65e0c5;letter-spacing:1px}.gym-card h3{margin:6px 0;font-size:19px}.gym-card p{margin:0;color:#a7bbc4;font-size:10px}@keyframes gym-turn{to{transform:rotate(360deg)}}