Free Section
Developer Product Changelog Feed
A GitHub/Linear inspired developer product changelog feed with version pills, release dates, and structured update cards.
Colours in this gradient
#090d16#38bdf8#10b981#ffffff
background: ;The code
Plain HTML and CSS 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="cl-sec">
<div class="cl-header">
<span class="cl-badge">Changelog & Releases</span>
<h2>Latest Product Improvements</h2>
<p>Everything shipped across our core CLI, API platform, and console dashboards.</p>
</div>
<div class="cl-feed">
<article class="cl-entry">
<div class="cl-sidebar">
<span class="cl-ver-pill">v2.4.0</span>
<time class="cl-time">Oct 20, 2026</time>
</div>
<div class="cl-content">
<h3>WebAssembly Vector Indexing & SIMD Acceleration</h3>
<p>This release introduces client-side SIMD instructions inside our WebAssembly parser, cutting local nearest-neighbor search times by 3.2x.</p>
<ul class="cl-bullets">
<li>Added automatic hardware AVX-512 detection.</li>
<li>Reduced memory footprint by 40% for quantized 8-bit embeddings.</li>
<li>Fixed edge-case connection dropouts during TLS renegotiation.</li>
</ul>
</div>
</article>
<article class="cl-entry">
<div class="cl-sidebar">
<span class="cl-ver-pill">v2.3.2</span>
<time class="cl-time">Oct 04, 2026</time>
</div>
<div class="cl-content">
<h3>Zero-Config Next.js 16 Edge Middleware Support</h3>
<p>Full support for Next.js 16 Turbopack streaming sessions and automated cookie signature verification.</p>
</div>
</article>
</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 clean developer product changelog feed in HTML and CSS. Requirements: - 2-column layout with release tag (e.g. v2.4.0) and date on the left, release notes on the right. - Markdown-style bullet points with custom indentation. - Dark theme (#090d16) with subtle divider borders between releases. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use CSS grid with 140px sidebar for release version metadata.
- 2
Add semantic <time> elements for ISO dates.
- 3
Collapse to single column on mobile screens.
Customisation tips
- Use monospace font on version tags for consistent technical aesthetic.