<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="recipe-timer-card">
  <div class="recipe-top">
    <span>
      STEP 03
    </span>
    <i>
      15 MIN
    </i>
  </div>
  <h3>
    Let it simmer
  </h3>
  <div class="recipe-clock">
    <span>
      08:42
    </span>
  </div>
  <div class="recipe-items">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <b>
      +4 ingredients
    </b>
  </div>
</article>

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

.recipe-timer-card{width:238px;padding:17px;border-radius:20px;background:#fff2dd;color:#5c3927;font-family:Arial,sans-serif;box-shadow:0 9px 18px #c58b5330}.recipe-top{display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:1.1px;color:#c46b45}.recipe-top i{padding:4px 6px;border-radius:5px;background:#f6d5ab;font-style:normal}.recipe-timer-card h3{margin:13px 0 10px;font-size:20px}.recipe-clock{display:grid;place-items:center;width:100%;height:66px;border-radius:14px;background:radial-gradient(circle at 50% 50%,#ed8060 0 34%,#d75b48 35% 37%,#f7c06b 38% 41%,#f8dfbd 42%);box-shadow:inset 0 0 0 7px #f8dfbd}.recipe-clock span{color:#fff;font:800 18px monospace;text-shadow:0 2px 2px #8f382d}.recipe-items{display:flex;align-items:center;margin-top:14px}.recipe-items i{width:19px;height:19px;margin-right:-5px;border:2px solid #fff2dd;border-radius:50%;background:#7eaa66}.recipe-items i:nth-child(2){background:#e59a51}.recipe-items i:nth-child(3){background:#d96363}.recipe-items b{margin-left:11px;font-size:10px;color:#9a6a53}