Free Section
Developer CLI Quickstart Section
A developer-first quickstart section featuring package manager tabs (npm, pnpm, yarn, bun), a 1-click copyable terminal command, and ASCII art banner.
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="cli-sec">
<div class="cli-wrap">
<div class="cli-head">
<span class="cli-badge">Developer Quickstart</span>
<h2>Start building in 30 seconds</h2>
<p>Initialize a production-ready template with our interactive CLI wizard. Zero configuration required.</p>
</div>
<div class="term-window">
<div class="term-bar">
<div class="term-dots">
<span class="d-red"></span><span class="d-yellow"></span><span class="d-green"></span>
</div>
<div class="term-tabs" id="pkgTabs">
<button class="t-btn is-active" data-cmd="npm create hyper-app@latest">npm</button>
<button class="t-btn" data-cmd="pnpm create hyper-app">pnpm</button>
<button class="t-btn" data-cmd="yarn create hyper-app">yarn</button>
<button class="t-btn" data-cmd="bun create hyper-app">bun</button>
</div>
<button class="term-copy" id="copyCmdBtn">Copy</button>
</div>
<div class="term-body">
<div class="term-prompt-line">
<span class="p-sign">></span>
<span class="p-code" id="cmdText">npm create hyper-app@latest</span>
</div>
<pre class="ascii-art">
__ __ ___
/ / / /_ ______ ___ _____ / | ____ ____
/ /_/ / / / / __ \/ _ \/ ___// /| | / __ \/ __ \
/ __ / /_/ / /_/ / __/ / / ___ |/ /_/ / /_/ /
/_/ /_/\__, / .___/\___/_/ /_/ |_/ .___/ .___/
/____/_/ /_/ /_/
</pre>
<div class="term-status">
<span class="s-dot"></span> Interactive scaffolding initialized for Next.js 16 + Tailwind CSS.
</div>
</div>
</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 a developer CLI quickstart terminal section in HTML, CSS and vanilla JavaScript. Requirements: - Centered section header on dark background (#060913). - Realistic macOS terminal window with window control dots, package manager tabs (npm, pnpm, yarn, bun), and 1-click copy button. - Clicking package manager tabs dynamically switches the command string (e.g. npm create vs pnpm create). - Copy button copies the active command to clipboard and displays feedback. - ASCII art logo banner in cyan monospace inside the terminal body. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Style a terminal card with window chrome bar and control dots.
- 2
Add interactive package manager tabs with data-cmd attributes.
- 3
Update command text on tab click.
- 4
Wire up navigator.clipboard.writeText with visual copied state.
Customisation tips
- Use user-select: none on ASCII art so users selecting text copy only commands.
- Include a pulsing green status dot to reinforce active system health.