Code window with syntax colors

What you receive in Webflow

• 39 native elements and 21 classes.
• Breakpoints: mobile landscape (767px), tablet (991px).
• States: hover.
• 1 Embed element keeps the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="cw">
  <div class="cw-inner">
    <div class="cw-copy">
      <span class="cw-kicker">Developer friendly</span>
      <h2 class="cw-title">Up and running in under a minute</h2>
      <p class="cw-text">Install the SDK, add your key and send your first event. Typed clients for every major language.</p>
      <a href="#" class="cw-link">Read the quickstart →</a>
    </div>
    <div class="cw-window">
      <div class="cw-bar"><span class="cw-dot cw-red"></span><span class="cw-dot cw-yellow"></span><span class="cw-dot cw-green"></span><span class="cw-file">app.js</span></div>
      <div class="cw-code">
        <div class="cw-line"><span class="cw-c">// npm install @pulse/sdk</span></div>
        <div class="cw-line"><span class="cw-k">import</span> { Pulse } <span class="cw-k">from</span> <span class="cw-s">"@pulse/sdk"</span>;</div>
        <div class="cw-line">&nbsp;</div>
        <div class="cw-line"><span class="cw-k">const</span> pulse = <span class="cw-k">new</span> <span class="cw-f">Pulse</span>({</div>
        <div class="cw-line">&nbsp;&nbsp;key: process.env.<span class="cw-v">PULSE_KEY</span>,</div>
        <div class="cw-line">&nbsp;&nbsp;region: <span class="cw-s">"eu"</span>,</div>
        <div class="cw-line">});</div>
        <div class="cw-line">&nbsp;</div>
        <div class="cw-line"><span class="cw-k">await</span> pulse.<span class="cw-f">track</span>(<span class="cw-s">"signup"</span>, { plan: <span class="cw-s">"pro"</span> });<span class="cw-cursor"></span></div>
      </div>
    </div>
  </div>
</section>
<style>
.cw { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #f4f4f5; color: #18181b; padding: 104px 24px; }
.cw-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.cw-kicker { display: block; color: #0891b2; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.cw-title { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; }
.cw-text { font-size: 17px; line-height: 1.6; color: #52525b; margin: 0 0 24px; }
.cw-link { color: #0891b2; font-weight: 700; text-decoration: none; font-size: 16px; }
.cw-link:hover { text-decoration: underline; }
.cw-window { background: #18181b; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(24, 24, 27, 0.5); }
.cw-bar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: #27272a; }
.cw-dot { width: 12px; height: 12px; border-radius: 50%; }
.cw-red { background: #f87171; } .cw-yellow { background: #fbbf24; } .cw-green { background: #4ade80; }
.cw-file { margin-left: 10px; color: #a1a1aa; font-size: 13px; }
.cw-code { padding: 24px; font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 1.7; color: #e4e4e7; }
.cw-line { white-space: nowrap; }
.cw-k { color: #c084fc; } .cw-s { color: #86efac; } .cw-f { color: #67e8f9; } .cw-v { color: #fca5a5; } .cw-c { color: #71717a; font-style: italic; }
.cw-cursor { display: inline-block; width: 9px; height: 18px; margin-left: 4px; vertical-align: -3px; background: #67e8f9; animation: cw-blink 1s steps(1) infinite; }
@keyframes cw-blink { 50% { opacity: 0; } }
@media (max-width: 991px) { .cw-inner { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 767px) { .cw { padding: 72px 20px; } .cw-title { font-size: 32px; } .cw-code { font-size: 13px; padding: 18px; overflow-x: auto; } }
</style>