Free Component
Copy Code Snippet Box
A developer code snippet card with file tab, language badge, syntax highlighting, and an animated one-click copy button.
Colours in this gradient
#0f172a#38bdf8#10b981#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="codebox-wrapper">
<div class="codebox-card">
<div class="codebox-header">
<div class="codebox-dots">
<span></span><span></span><span></span>
</div>
<div class="codebox-tab">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
auth-middleware.ts
</div>
<button class="codebox-copy" id="codeCopyBtn" aria-label="Copy code">
<span class="copy-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
</span>
<span class="copy-text">Copy</span>
</button>
</div>
<div class="codebox-body">
<div class="codebox-lines">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
</div>
<pre class="codebox-pre"><code id="codeSnippetContent"><span class="c-kw">import</span> { NextResponse } <span class="c-kw">from</span> <span class="c-str">"next/server"</span>;
<span class="c-kw">import type</span> { NextRequest } <span class="c-kw">from</span> <span class="c-str">"next/server"</span>;
<span class="c-kw">export function</span> <span class="c-fn">middleware</span>(req: <span class="c-typ">NextRequest</span>) {
<span class="c-kw">const</span> token = req.cookies.<span class="c-fn">get</span>(<span class="c-str">"session"</span>)?.value;
<span class="c-kw">if</span> (!token) <span class="c-kw">return</span> NextResponse.<span class="c-fn">redirect</span>(<span class="c-kw">new</span> <span class="c-typ">URL</span>(<span class="c-str">"/login"</span>, req.url));
<span class="c-kw">return</span> NextResponse.<span class="c-fn">next</span>();
}</code></pre>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create a dark modern code snippet container card with line numbers and a one-click clipboard copy button in HTML, CSS and vanilla JavaScript. Requirements: - macOS style 3 colored dots (red, yellow, green) on the top bar. - File tab showing icon and file name. - Animated copy button using navigator.clipboard API with 2-second 'Copied!' success feedback. - Left column with non-selectable line numbers separated by a vertical border. - Monospace typography with clean keyword syntax highlights. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Structure header bar with dots, tab name and copy trigger.
- 2
Split code body into line counter column and syntax block.
- 3
Add clipboard writeText listener with temporary active class toggling.
Customisation tips
- Use user-select: none on line numbers so users don't accidentally copy them.
- Include fallback clipboard textarea logic for older iframe contexts.