JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<details class="DetailContainer">
  <summary>Step by Step Guides</summary>
  <details class="DetailsOne">
    <summary>Getting Started</summary>
    <p>1. Signup for a free trial</p>
  </details>
  <details class="DetailsOne">
    <summary>Setting up a backup schedule</summary>
    <p>This step assumes you have already signed up and installed the software</p>
  </details>
</details>

CSS

summary::-webkit-details-marker {
  color: #B6B6B6;
  font-size: 20px;
  margin-right: 2px;
}

details:hover {
  color: red;
}

summary::marker {
  color: blue;
  content:'+';
}