Free Section
Interactive Feature Selector Showcase
An enterprise feature selector section with active tab buttons on the left and dynamic screenshot cards on the right.
Colours in this gradient
#030712#3b82f6#8b5cf6#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="ftab-sec">
<div class="ftab-header">
<span class="ftab-badge">Control Plane</span>
<h2>Deep observability across your clusters</h2>
</div>
<div class="ftab-layout">
<div class="ftab-nav" id="ftabNav">
<div class="ftab-btn is-active" data-idx="0">
<h4>Real-Time Telemetry</h4>
<p>Live request histograms and P99 latency tracking across 35 regions.</p>
</div>
<div class="ftab-btn" data-idx="1">
<h4>Automated Rebalancing</h4>
<p>Zero-downtime shard migration during traffic surges or hardware failover.</p>
</div>
<div class="ftab-btn" data-idx="2">
<h4>Role-Based Access</h4>
<p>Granular IAM access policies with hardware-backed WebAuthn authentication.</p>
</div>
</div>
<div class="ftab-preview">
<div class="ftab-screen" id="ftabScreen">
<div class="fts-header">
<div class="fts-dots"><span></span><span></span><span></span></div>
<span id="ftsTitle">telemetry-dashboard-prod</span>
</div>
<div class="fts-body" id="ftsBody">
<div class="fts-graphic">📊</div>
<div class="fts-caption" id="ftsCaption">P99 Latency: 1.2ms · Cluster Load: 42%</div>
</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 an interactive feature tab selector with synchronized preview card in HTML, CSS and vanilla JavaScript. Requirements: - Left column with 3 clickable feature list items. - Active item highlights with border-color and subtle gradient. - Right column mock screen updates title, metric caption, and graphic on tab switch. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Store preview metadata in JavaScript array.
- 2
Bind click events on nav tabs to swap active classes and update preview card elements.
Customisation tips
- A 2-column feature selector is one of the highest-converting section layouts for B2B SaaS.