Pure CSS Interactive Accordion

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="accordion-521"><details open><summary><span>What is CodePeek?</span><span class="chevron">›</span></summary><p>CodePeek is a curated directory of UI components built with HTML, CSS, and JS.</p></details><details><summary><span>Is it free to use?</span><span class="chevron">›</span></summary><p>Yes, all components are licensed under MIT and completely free for personal or commercial use.</p></details></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.accordion-521 { width: 260px; font-family: system-ui, sans-serif; display: flex; flex-direction: column; gap: 8px; margin: auto; }
.accordion-521 details { background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.accordion-521 summary { padding: 12px 16px; font-size: 12px; font-weight: 700; color: #1e293b; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.accordion-521 summary::-webkit-details-marker { display: none; }
.accordion-521 .chevron { font-size: 16px; transition: transform 0.3s; color: #94a3b8; }
.accordion-521 details[open] .chevron { transform: rotate(90deg); color: #3b82f6; }
.accordion-521 p { margin: 0; padding: 0 16px 12px; font-size: 11px; color: #64748b; line-height: 1.5; border-top: 1px solid #f8fafc; }