JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<h2>ONLY WORKS IN CHROME!!</h2>

<details>
    <summary>Numbers</summary>
    <hr/>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</details>
<details>
    <summary>Roman Numerals</summary>
    <hr/>
    <ul>
        <li>I</li>
        <li>II</li>
        <li>III</li>
        <li>IIII</li>
    </ul>
</details>
<details>
    <summary>Letters</summary>
    <hr/>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
</details>

CSS

details {
    padding: 2px 5px;
    border: 1px solid #000;
    cursor: pointer;
}
details > ul {
    cursor: default;
}
details:first-child {
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}
details:last-child {
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
details[open] {
    transition: height 2s;
    -webkit-transition: height 5s;
}