Animated Code Editor Window

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="code-card">
  <div class="code-header"><span class="c-dot r"></span><span class="c-dot y"></span><span class="c-dot g"></span><span class="c-title">ProgressBar.tsx</span></div>
  <div class="code-content">
    <p><span class="p-k">&lt;Card&gt;</span></p>
    <p class="p-m">&nbsp;&nbsp;<span class="p-t">&lt;Metric&gt;</span>$ 71,465<span class="p-t">&lt;/Metric&gt;</span></p>
    <p class="p-m">&nbsp;&nbsp;<span class="p-v">32% of annual target</span></p>
    <div class="p-bar"><div class="p-fill"></div></div>
    <p><span class="p-k">&lt;/Card&gt;</span></p>
  </div>
</div>

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

.code-card { width: 230px; background: #0f172a; border-radius: 12px; overflow: hidden; font-family: ui-monospace, monospace; box-shadow: 0 12px 30px rgba(0,0,0,0.4); border: 1px solid #1e293b; }
.code-header { background: #1e293b; padding: 10px 12px; display: flex; align-items: center; gap: 6px; }
.c-dot { width: 9px; height: 9px; border-radius: 50%; }
.r { background: #ef4444; } .y { background: #f59e0b; } .g { background: #10b981; }
.c-title { color: #64748b; font-size: 10px; margin-left: auto; font-weight: 600; }
.code-content { padding: 14px; font-size: 11px; color: #f8fafc; line-height: 1.6; }
.code-content p { margin: 2px 0; }
.p-k { color: #f43f5e; font-weight: 600; }
.p-t { color: #38bdf8; }
.p-v { color: #818cf8; font-size: 10px; }
.p-bar { width: 100%; height: 6px; background: #1e293b; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.p-fill { width: 32%; height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7); border-radius: 3px; animation: pulseWidth 2.5s infinite ease-in-out; }
@keyframes pulseWidth { 0%, 100% { width: 32%; } 50% { width: 75%; } }