.ctc-exp { display: inline-block; background: #1f1f2e; border: 1px solid rgba(124,108,255,0.3); border-radius: 14px; overflow: hidden; font-family: system-ui, sans-serif; max-width: 280px; }
.ctc-exp summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; list-style: none; cursor: pointer; font-weight: 600; font-size: 12px; color: #c4b5fd; user-select: none; }
.ctc-exp summary::-webkit-details-marker { display: none; }
.ctc-exp summary svg { width: 11px; height: 11px; color: currentColor; transition: transform 0.2s ease; }
.ctc-exp[open] summary svg { transform: rotate(180deg); }
.ctc-exp[open] { display: block; border-radius: 14px; }
.ctc-exp-body { margin: 0; padding: 8px 14px 12px; font-size: 12px; line-height: 1.55; color: #b8b6d4; border-top: 1px solid rgba(255,255,255,0.06); }
.ctc-exp summary:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; } <details class="ctc-exp">
<summary>
<span class="ctc-exp-tag">React</span>
<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
</summary>
<p class="ctc-exp-body">A JavaScript library for building user interfaces with components and hooks.</p>
</details> Live preview Edit any tab — preview updates live Ready