JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<details open>
    <summary>details element with open</summary>
    <p>This is secret content hidden insde of details tag. Summary acts as a title.</p>
</details>

<details>
    <summary>details element</summary>
    <p>This is secret content hidden insde of details tag. Summary acts as a title.</p>
</details>

CSS

details {
    margin-top: -1px;
    border: 1px solid #ccc;
   padding: 6px; 
}
details p { margin: 0; padding: 3px 0 0 0; border-top: 1px dotted #bbb; }
details[open] {
    background-color: #ffa;
}
details summary {
    cursor: pointer;
}