JSFiddle - React, Tailwind, and code Playground

HTML

<details>
  <summary class="details-summary">1つ目のアコーディオンのタイトル</summary>
  ここは、1つ目のアコーディオンの中身です。
</details>
<details>
 <summary class="details-summary">2つ目のアコーディオンのタイトル</summary>
  ここは、2つ目のアコーディオンの中身です。
</details>
<details>
  <summary class="details-summary">3つ目のアコーディオンのタイトル</summary>
  ここは、3つ目のアコーディオンの中身です。
</details>

SCSS

.details-summary {
	cursor: pointer;
	transition: 0.2s;
	padding: 6px;
	border-radius: 6px;
	font-size: 20px;

	/* ホバー時のスタイル */
	&:hover {
		cursor: pointer;
		background-color: #bee1de;
	}

	/* タブフォーカス時のスタイル */
	&:focus-visible {
		outline: dashed #00a5a0;
	}
}

/* 以下の記述は不要です */
body {
	margin: 20px;
}