Free Section
Interactive Tabbed Code Showcase
A developer API section with interactive language tabs (cURL, TypeScript, Python), syntax highlights, and live JSON response preview.
Colours in this gradient
#030712#3b82f6#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.
<section class="tab-code-sec">
<div class="tc-header">
<span class="tc-badge">Developer First API</span>
<h2>Integrate in three lines of code</h2>
<p>Official client libraries available for Node.js, Python, Go, and Rust with full type inference.</p>
</div>
<div class="tc-editor-card">
<div class="tc-top-bar">
<div class="tc-tabs" id="codeTabGroup">
<button class="tc-tab is-active" data-lang="ts">TypeScript</button>
<button class="tc-tab" data-lang="py">Python</button>
<button class="tc-tab" data-lang="curl">cURL</button>
</div>
<button class="tc-copy-btn" id="tcCopyBtn">Copy Code</button>
</div>
<div class="tc-code-body">
<pre class="tc-pre" id="tcPre"><code><span class="c-kw">import</span> { EdgeDB } <span class="c-kw">from</span> <span class="c-str">"@orbit/sdk"</span>;
<span class="c-kw">const</span> client = <span class="c-kw">new</span> <span class="c-fn">EdgeDB</span>({ apiKey: process.env.API_KEY });
<span class="c-kw">const</span> response = <span class="c-kw">await</span> client.embeddings.<span class="c-fn">create</span>({
input: <span class="c-str">"High throughput vector search"</span>,
model: <span class="c-str">"text-embedding-3-small"</span>
});</code></pre>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create an interactive tabbed code preview section in HTML, CSS and vanilla JavaScript. Requirements: - Centered header with API description. - Top bar with clickable language tabs (TypeScript, Python, cURL). - Instant syntax code swap on tab selection without page reload. - One-click copy code button. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Store code snippets for each language in a JavaScript lookup map.
- 2
Update innerHTML on tab button click.
- 3
Toggle .is-active tab styling.
Customisation tips
- Preserve escaped newlines and syntax spans in code templates.