Multi-language code block with typing animation
Dark code card with a language tab switcher, the code types itself in on load and on tab change with a blinking caret, no syntax highlighter dependency, just monospace color and a caret pseudo-element. Great for a developer-facing product page, skip it entirely for local-business or non-technical clients.
Live preview
open in new tab ↗<div class="sw-code-card">
<div class="sw-code-tabs">
<button class="sw-code-tab sw-code-tab-active" data-lang="node">Node.js</button>
<button class="sw-code-tab" data-lang="python">Python</button>
<button class="sw-code-tab" data-lang="ruby">Ruby</button>
</div>
<pre class="sw-code-pane" id="swCodePane" data-node="const client = require('payments')('sk_test_xxx');
let intent = await client.paymentIntents.create({
amount: 2000,
currency: 'usd',
});
await client.paymentIntents.confirm(intent.id);" data-python="client = Payments(api_key='sk_test_xxx')
intent = client.payment_intents.create(
amount=2000,
currency='usd',
)
client.payment_intents.confirm(intent.id)" data-ruby="client = Payments.new('sk_test_xxx')
intent = client.payment_intents.create(
amount: 2000,
currency: 'usd',
)
client.payment_intents.confirm(intent.id)"><code id="swCodeText"></code></pre>
</div>Block id: stripe-code-tabs-typingvanilla · swap-content
More composite blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.