Content Tag Card
Colored pill labels (Machine Learning, DevOps, Security) that lift on hover and reveal a tag-detail card — colored icon block, article count, description, popularity-this-month bar with trend, related-tag pills, and the top three articles in this tag. For blog tag clouds, knowledge bases, content discovery surfaces.
Content Tag Card the 12th of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ctag-stage">
<div class="ctag-inner">
<div class="ctag-list">
<div class="ctag-t">
<div class="ctag-pill" style="background:#eff6ff;border-color:#bfdbfe;color:#1e40af"><span class="ctag-dot" style="background:#3b82f6"></span>Machine Learning</div>
<div class="ctag-tip">
<div class="ctag-head">
<div class="ctag-head-row"><div class="ctag-icon" style="background:#dbeafe;color:#1e40af">ML</div><div><div class="ctag-name">Machine Learning</div><div class="ctag-count">1,284 articles</div></div></div>
<div class="ctag-desc">Algorithms that enable systems to learn from data without explicit programming. Covers supervised, unsupervised, and reinforcement learning.</div>
</div>
<div class="ctag-pop">
<div class="ctag-pop-label">Popularity this month</div>
<div class="ctag-track"><div class="ctag-fill" style="width:88%;background:#3b82f6"></div></div>
<div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+14% vs last month</span></div>
</div>
<div class="ctag-rel">
<div class="ctag-rel-label">Related</div>
<div class="ctag-rel-pills"><span class="ctag-rel-pill">Deep Learning</span><span class="ctag-rel-pill">Neural Nets</span><span class="ctag-rel-pill">PyTorch</span></div>
</div>
<div class="ctag-ex">
<div class="ctag-ex-label">Top articles</div>
<div class="ctag-ex-item">Fine-tuning LLMs on custom datasets</div>
<div class="ctag-ex-item">Understanding transformer attention</div>
<div class="ctag-ex-item">Gradient descent, explained visually</div>
</div>
</div>
</div>
<div class="ctag-t">
<div class="ctag-pill" style="background:#f0fdf4;border-color:#bbf7d0;color:#15803d"><span class="ctag-dot" style="background:#22c55e"></span>Open Source</div>
<div class="ctag-tip">
<div class="ctag-head">
<div class="ctag-head-row"><div class="ctag-icon" style="background:#dcfce7;color:#15803d">OS</div><div><div class="ctag-name">Open Source</div><div class="ctag-count">2,941 articles</div></div></div>
<div class="ctag-desc">Software with source code available for anyone to use, inspect, modify, and distribute. Covers licensing, contributing, and ecosystem news.</div>
</div>
<div class="ctag-pop">
<div class="ctag-pop-label">Popularity this month</div>
<div class="ctag-track"><div class="ctag-fill" style="width:94%;background:#22c55e"></div></div>
<div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ all-time high</strong></span><span>+22% vs last month</span></div>
</div>
<div class="ctag-rel">
<div class="ctag-rel-label">Related</div>
<div class="ctag-rel-pills"><span class="ctag-rel-pill">GitHub</span><span class="ctag-rel-pill">Linux</span><span class="ctag-rel-pill">Licensing</span></div>
</div>
<div class="ctag-ex">
<div class="ctag-ex-label">Top articles</div>
<div class="ctag-ex-item">How to write a great README</div>
<div class="ctag-ex-item">OSS licensing: MIT vs Apache vs GPL</div>
<div class="ctag-ex-item">First PR tips for new contributors</div>
</div>
</div>
</div>
<div class="ctag-t">
<div class="ctag-pill" style="background:#fdf4ff;border-color:#e9d5ff;color:#7e22ce"><span class="ctag-dot" style="background:#a855f7"></span>System Design</div>
<div class="ctag-tip">
<div class="ctag-head">
<div class="ctag-head-row"><div class="ctag-icon" style="background:#f3e8ff;color:#7e22ce">SD</div><div><div class="ctag-name">System Design</div><div class="ctag-count">876 articles</div></div></div>
<div class="ctag-desc">The process of defining the architecture, components, and interfaces of a system to satisfy specified requirements at scale.</div>
</div>
<div class="ctag-pop">
<div class="ctag-pop-label">Popularity this month</div>
<div class="ctag-track"><div class="ctag-fill" style="width:76%;background:#a855f7"></div></div>
<div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+3% vs last month</span></div>
</div>
<div class="ctag-rel">
<div class="ctag-rel-label">Related</div>
<div class="ctag-rel-pills"><span class="ctag-rel-pill">Distributed</span><span class="ctag-rel-pill">CAP Theorem</span><span class="ctag-rel-pill">Databases</span></div>
</div>
<div class="ctag-ex">
<div class="ctag-ex-label">Top articles</div>
<div class="ctag-ex-item">Designing a rate limiter from scratch</div>
<div class="ctag-ex-item">When to use a message queue</div>
<div class="ctag-ex-item">Read replicas and write-ahead logs</div>
</div>
</div>
</div>
<div class="ctag-t">
<div class="ctag-pill" style="background:#fff7ed;border-color:#fed7aa;color:#c2410c"><span class="ctag-dot" style="background:#f97316"></span>Career</div>
<div class="ctag-tip">
<div class="ctag-head">
<div class="ctag-head-row"><div class="ctag-icon" style="background:#ffedd5;color:#c2410c">CR</div><div><div class="ctag-name">Career</div><div class="ctag-count">3,102 articles</div></div></div>
<div class="ctag-desc">Advice on navigating tech careers — from first job to staff engineer, negotiation, interviews, and switching roles.</div>
</div>
<div class="ctag-pop">
<div class="ctag-pop-label">Popularity this month</div>
<div class="ctag-track"><div class="ctag-fill" style="width:82%;background:#f97316"></div></div>
<div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+9% vs last month</span></div>
</div>
<div class="ctag-rel">
<div class="ctag-rel-label">Related</div>
<div class="ctag-rel-pills"><span class="ctag-rel-pill">Interviews</span><span class="ctag-rel-pill">Salary</span><span class="ctag-rel-pill">Remote work</span></div>
</div>
<div class="ctag-ex">
<div class="ctag-ex-label">Top articles</div>
<div class="ctag-ex-item">The staff engineer path, explained</div>
<div class="ctag-ex-item">How to negotiate a competing offer</div>
<div class="ctag-ex-item">Writing your first performance review</div>
</div>
</div>
</div>
<div class="ctag-t">
<div class="ctag-pill" style="background:#fff1f2;border-color:#fecdd3;color:#be123c"><span class="ctag-dot" style="background:#f43f5e"></span>Security</div>
<div class="ctag-tip">
<div class="ctag-head">
<div class="ctag-head-row"><div class="ctag-icon" style="background:#ffe4e6;color:#be123c">SE</div><div><div class="ctag-name">Security</div><div class="ctag-count">1,540 articles</div></div></div>
<div class="ctag-desc">Application security, cryptography, threat modelling, vulnerability research, and secure development practices for engineers.</div>
</div>
<div class="ctag-pop">
<div class="ctag-pop-label">Popularity this month</div>
<div class="ctag-track"><div class="ctag-fill" style="width:70%;background:#f43f5e"></div></div>
<div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+18% vs last month</span></div>
</div>
<div class="ctag-rel">
<div class="ctag-rel-label">Related</div>
<div class="ctag-rel-pills"><span class="ctag-rel-pill">OWASP</span><span class="ctag-rel-pill">Auth</span><span class="ctag-rel-pill">CVE</span></div>
</div>
<div class="ctag-ex">
<div class="ctag-ex-label">Top articles</div>
<div class="ctag-ex-item">SQL injection prevention in 2024</div>
<div class="ctag-ex-item">JWT vs sessions: which to use</div>
<div class="ctag-ex-item">Zero-trust architecture basics</div>
</div>
</div>
</div>
<div class="ctag-t">
<div class="ctag-pill" style="background:#f0fdfa;border-color:#99f6e4;color:#0f766e"><span class="ctag-dot" style="background:#14b8a6"></span>DevOps</div>
<div class="ctag-tip">
<div class="ctag-head">
<div class="ctag-head-row"><div class="ctag-icon" style="background:#ccfbf1;color:#0f766e">DO</div><div><div class="ctag-name">DevOps</div><div class="ctag-count">1,188 articles</div></div></div>
<div class="ctag-desc">Practices and tools that unify software development and IT operations — CI/CD, containerisation, infrastructure as code, monitoring.</div>
</div>
<div class="ctag-pop">
<div class="ctag-pop-label">Popularity this month</div>
<div class="ctag-track"><div class="ctag-fill" style="width:66%;background:#14b8a6"></div></div>
<div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+2% vs last month</span></div>
</div>
<div class="ctag-rel">
<div class="ctag-rel-label">Related</div>
<div class="ctag-rel-pills"><span class="ctag-rel-pill">Docker</span><span class="ctag-rel-pill">Kubernetes</span><span class="ctag-rel-pill">Terraform</span></div>
</div>
<div class="ctag-ex">
<div class="ctag-ex-label">Top articles</div>
<div class="ctag-ex-item">Building zero-downtime deploys</div>
<div class="ctag-ex-item">Helm charts for beginners</div>
<div class="ctag-ex-item">Observability vs. monitoring</div>
</div>
</div>
</div>
<div class="ctag-t">
<div class="ctag-pill" style="background:#fefce8;border-color:#fef08a;color:#854d0e"><span class="ctag-dot" style="background:#eab308"></span>Performance</div>
<div class="ctag-tip">
<div class="ctag-head">
<div class="ctag-head-row"><div class="ctag-icon" style="background:#fef9c3;color:#854d0e">PF</div><div><div class="ctag-name">Performance</div><div class="ctag-count">922 articles</div></div></div>
<div class="ctag-desc">Techniques for optimising speed, throughput, and resource efficiency — from query tuning to Core Web Vitals.</div>
</div>
<div class="ctag-pop">
<div class="ctag-pop-label">Popularity this month</div>
<div class="ctag-track"><div class="ctag-fill" style="width:60%;background:#eab308"></div></div>
<div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+1% vs last month</span></div>
</div>
<div class="ctag-rel">
<div class="ctag-rel-label">Related</div>
<div class="ctag-rel-pills"><span class="ctag-rel-pill">Profiling</span><span class="ctag-rel-pill">Caching</span><span class="ctag-rel-pill">Web Vitals</span></div>
</div>
<div class="ctag-ex">
<div class="ctag-ex-label">Top articles</div>
<div class="ctag-ex-item">N+1 queries and how to fix them</div>
<div class="ctag-ex-item">React re-renders: a visual guide</div>
<div class="ctag-ex-item">Redis caching patterns in production</div>
</div>
</div>
</div>
<div class="ctag-t">
<div class="ctag-pill" style="background:#f8fafc;border-color:#e2e8f0;color:#475569"><span class="ctag-dot" style="background:#94a3b8"></span>Architecture</div>
<div class="ctag-tip">
<div class="ctag-head">
<div class="ctag-head-row"><div class="ctag-icon" style="background:#f1f5f9;color:#475569">AR</div><div><div class="ctag-name">Architecture</div><div class="ctag-count">748 articles</div></div></div>
<div class="ctag-desc">Software architecture patterns, trade-offs, and design decisions — microservices, monoliths, event-driven, hexagonal, and beyond.</div>
</div>
<div class="ctag-pop">
<div class="ctag-pop-label">Popularity this month</div>
<div class="ctag-track"><div class="ctag-fill" style="width:54%;background:#94a3b8"></div></div>
<div class="ctag-trend"><span class="ctag-trend-left"><strong>↓ slight dip</strong></span><span>−3% vs last month</span></div>
</div>
<div class="ctag-rel">
<div class="ctag-rel-label">Related</div>
<div class="ctag-rel-pills"><span class="ctag-rel-pill">DDD</span><span class="ctag-rel-pill">Microservices</span><span class="ctag-rel-pill">Clean Code</span></div>
</div>
<div class="ctag-ex">
<div class="ctag-ex-label">Top articles</div>
<div class="ctag-ex-item">Monolith first: the case for starting simple</div>
<div class="ctag-ex-item">CQRS and event sourcing, explained</div>
<div class="ctag-ex-item">When to break up a microservice</div>
</div>
</div>
</div>
</div>
</div>
</div> .ctag-stage {
background: #fff;
/* Top room — content-tag cards pop UP from each pill (~300px tall). */
padding: 320px 28px 36px;
font-family: 'Inter', system-ui, sans-serif;
}
.ctag-inner {
max-width: 560px;
margin: 0 auto;
}
.ctag-list {
display: flex;
flex-wrap: wrap;
gap: 9px;
justify-content: center;
}
.ctag-t {
position: relative;
}
.ctag-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
font-size: 12.5px;
font-weight: 500;
border: 1px solid transparent;
cursor: help;
transition: transform .15s, box-shadow .15s;
}
.ctag-t:hover .ctag-pill {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.ctag-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.ctag-tip {
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 260px;
background: #fff;
border-radius: 11px;
border: 1px solid rgba(0, 0, 0, 0.07);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.11),
0 2px 8px rgba(0, 0, 0, 0.05);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
z-index: 30;
overflow: hidden;
text-align: left;
}
.ctag-t:hover .ctag-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.ctag-head {
padding: 13px 14px 11px;
border-bottom: 1px solid #f4f4f4;
}
.ctag-head-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.ctag-icon {
width: 30px;
height: 30px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.ctag-name {
font-size: 14px;
font-weight: 700;
color: #111;
line-height: 1.2;
}
.ctag-count {
font-size: 10px;
color: #bbb;
margin-top: 1px;
}
.ctag-desc {
font-size: 11.5px;
color: #666;
line-height: 1.55;
}
.ctag-pop {
padding: 10px 14px;
border-bottom: 1px solid #f4f4f4;
}
.ctag-pop-label {
font-size: 7.5px;
color: #ccc;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ctag-track {
height: 5px;
background: #f0f0f0;
border-radius: 3px;
overflow: hidden;
margin-bottom: 5px;
}
.ctag-fill {
height: 100%;
border-radius: 3px;
}
.ctag-trend {
font-size: 10px;
color: #bbb;
display: flex;
justify-content: space-between;
}
.ctag-trend-left strong {
color: #555;
font-weight: 600;
}
.ctag-rel {
padding: 10px 14px;
border-bottom: 1px solid #f4f4f4;
}
.ctag-rel-label {
font-size: 7.5px;
color: #ccc;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ctag-rel-pills {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.ctag-rel-pill {
font-size: 9.5px;
padding: 2px 7px;
border-radius: 10px;
background: #f4f4f6;
color: #888;
border: 1px solid #eee;
}
.ctag-ex {
padding: 10px 14px 12px;
}
.ctag-ex-label {
font-size: 7.5px;
color: #ccc;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ctag-ex-item {
font-size: 10.5px;
color: #777;
margin-bottom: 4px;
padding-left: 9px;
position: relative;
line-height: 1.4;
}
.ctag-ex-item::before {
content: '·';
position: absolute;
left: 2px;
color: #ccc;
}