<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="tea-card">
  <div class="tea-cup">
    <i>
    </i>
    <b>
      🍃
    </b>
  </div>
  <div>
    <small>
      BREWING NOW
    </small>
    <h3>
      Jasmine green
    </h3>
    <p>
      2:18 remaining
    </p>
  </div>
</article>

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

.tea-card{display:flex;align-items:center;gap:14px;width:253px;padding:17px;border-radius:18px;background:#f2ead8;color:#4e4935;font-family:Arial;box-shadow:0 8px 16px #917b4c26}.tea-cup{position:relative;width:64px;height:52px;overflow:hidden;border:4px solid #708c68;border-top:0;border-radius:0 0 18px 18px;background:#f9f3e6}.tea-cup::after{content:"";position:absolute;right:-20px;top:13px;width:19px;height:19px;border:4px solid #708c68;border-left:0;border-radius:0 15px 15px 0}.tea-cup i{position:absolute;left:0;right:0;bottom:0;height:25px;background:#b6ce73;animation:tea-steep 3s ease-in-out infinite}.tea-cup b{position:absolute;z-index:2;left:23px;top:11px;font-size:15px}.tea-card small{font-size:9px;font-weight:800;letter-spacing:1px;color:#8ea15d}.tea-card h3{margin:7px 0;font-size:18px}.tea-card p{margin:0;font-size:10px;color:#7b806d}@keyframes tea-steep{50%{height:38px;background:#879f55}}