JSFiddle - React, Tailwind, and code Playground

HTML

<details>
	<summary>First</summary>
	<p>Body first</p>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
</details>
<details>
	<summary>Second</summary>
	 <p>Body Second</p>
    <ul>
      <li>E</li>
      <li>F</li>
      <li>G</li>
    </ul>
</details>

CSS

summary{
	display: block;
	background-color: #e5e5e5;
	border-top: 3px solid #14213d;
	cursor: pointer;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	 font-family: sans-serif;
    font-weight: bold;
}
summary:hover{
	background-color: #fca311;
      color: white;
}