<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="code-card">
  <div class="code-bar">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <span>
      app.css
    </span>
  </div>
  <pre>
    <b>
      .card
    </b>
    { display:
    <em>
      grid
    </em>
    ; gap:
    <strong>
      12px
    </strong>
    ; }
  </pre>
  <p>
    <span>
      ●
    </span>
    Saved just now
  </p>
</article>

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

.code-card{width:250px;overflow:hidden;border-radius:12px;background:#222735;color:#ccd8ee;font-family:monospace;box-shadow:0 9px 18px #20283a42}.code-bar{display:flex;align-items:center;gap:5px;padding:11px;background:#30384a}.code-bar i{width:7px;height:7px;border-radius:50%;background:#f07873}.code-bar i:nth-child(2){background:#e7bd6a}.code-bar i:nth-child(3){background:#73c99a}.code-bar span{margin-left:7px;color:#aebbd3;font-size:10px}.code-card pre{margin:0;padding:16px;font-size:12px;line-height:1.8}.code-card pre b{color:#e89cff}.code-card pre em{color:#78d6c2}.code-card pre strong{color:#f5c878}.code-card p{margin:0;padding:10px 16px;background:#1a1f2a;color:#8695ad;font:10px Arial}.code-card p span{color:#68d1a0}