react-flare-accordion/dist/index.css

React Flare Accordion is a simple and customizable accordion component for React applications.

.accordion{font-family:Arial,sans-serif;margin:20px auto;max-width:1200px;width:100%}.accordion-item{border-bottom:1px solid #ccc}.accordion-item input{display:none}.accordion-title{cursor:pointer;display:flex;font-size:16px;gap:10px;justify-content:space-between;padding:17px 15px;transition:background .3s ease}.accordion-title .icon img{transition:transform .3s ease;width:clamp(12px,2vw,16px)}.accordion-content{color:#555;font-size:14px;max-height:0;opacity:0;overflow:hidden;padding:0 15px;transform:scaleY(0);transform-origin:top;transition:transform .4s ease-in-out,opacity .3s ease-in-out,padding .3s ease-in-out,visibility 0s linear .4s;visibility:hidden}.accordion-item input:checked+.accordion-title+.accordion-content{max-height:1000px;opacity:1;padding:0 15px 15px;transform:scaleY(1);transition:transform .4s ease-in-out,opacity .3s ease-in-out,padding .3s ease-in-out,visibility 0s;visibility:visible}.accordion-item input:checked+.accordion-title .icon img{transform:rotate(45deg)}