<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="shelf-card">
  <div class="shelf-jars">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
  </div>
  <small>
    FROM YOUR PANTRY
  </small>
  <h3>
    Golden lentil soup
  </h3>
  <p>
    6 ingredients ready
    <b>
      →
    </b>
  </p>
</article>

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

.shelf-card{width:238px;padding:16px;border-radius:13px;background:#f3e1be;color:#60432d;font-family:Arial}.shelf-jars{display:flex;align-items:end;gap:9px;height:64px;margin-bottom:13px;padding:0 13px 5px;border-bottom:5px solid #966a49}.shelf-jars i{display:block;width:31px;height:41px;border:3px solid #d9c3a0;border-radius:8px 8px 5px 5px;background:#e59d51;box-shadow:inset 0 10px #f2c66d}.shelf-jars i:nth-child(2){height:53px;background:#a8bb71;box-shadow:inset 0 10px #cfda94}.shelf-jars i:nth-child(3){height:34px;background:#cd7657;box-shadow:inset 0 10px #e69a78}.shelf-card small{font-size:9px;font-weight:800;letter-spacing:1px;color:#b07c55}.shelf-card h3{margin:7px 0;font-size:19px}.shelf-card p{margin:0;color:#92715a;font-size:10px}.shelf-card p b{float:right;color:#ba7849;font-size:17px}