<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="toolbelt-card">
  <div class="belt-tools">
    <i>
      ⌁
    </i>
    <i>
      ⌗
    </i>
    <i>
      ⊙
    </i>
  </div>
  <small>
    WORKBENCH
  </small>
  <h3>
    Kitchen shelf
  </h3>
  <p>
    <b>
    </b>
    3 of 5 tasks complete
  </p>
</article>

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

.toolbelt-card{width:244px;padding:16px;border-radius:11px;background:#364750;color:#f3f0e4;font-family:Arial;box-shadow:0 8px 0 #22323a}.belt-tools{display:flex;gap:8px;margin:-4px 0 16px;padding-bottom:10px;border-bottom:2px dashed #71848a}.belt-tools i{display:grid;place-items:center;width:33px;height:33px;border-radius:5px;background:#d79453;color:#35464e;font:800 20px Arial;box-shadow:inset 2px 2px 3px #f5c87d}.toolbelt-card small{font-size:9px;font-weight:800;letter-spacing:1px;color:#e3b473}.toolbelt-card h3{margin:7px 0;font-size:19px}.toolbelt-card p{margin:0;color:#c4d1cc;font-size:10px}.toolbelt-card p b{display:inline-block;width:58px;height:6px;margin-right:6px;border-radius:6px;background:linear-gradient(90deg,#6ee0b8 60%,#64777d 60%)}