JSFiddle - React, Tailwind, and code Playground

by thurstanh

HTML

<body>
    <section>
      <article>
        <details>
          <summary>Step by Step Guides</summary>
          <details>
            <summary>Getting Started</summary>
            <p>1. Signup for a free trial</p>
          </details>
          <details>
            <summary>Setting up a backup schedule</summary>
            <p>This step assumes you have already signed up and installed the software</p>
          </details>
        </details>
        <details>
          <summary>Installation/Upgrade Issues</summary>
          <p>After setup the program doesn't start</p>
        </details>
      </article>
      
      <article>
        <details>
          <summary>SERVER Step by Step Guides</summary>
          <details>
            <summary>Getting Started</summary>
            <p>1. Signup for a free trial</p>
          </details>
          <details>
            <summary>Setting up a backup schedule</summary>
            <p>This step assumes you have already signed up and installed the software</p>
          </details>
        </details>
        <details>
          <summary>Installation/Upgrade Issues</summary>
          <p>After setup the program doesn't start</p>
        </details>
      </article> 

</section>
</body>

CSS

summary::-webkit-details-marker {
 color: #00ACF3;
 font-size: 125%;
 margin-right: 2px;
}
summary:focus {
	outline-style: none;
}
article > details > summary {
	font-size: 28px;
	margin-top: 16px;
}
details > p {
	margin-left: 24px;
}
details details {
	margin-left: 36px;
}
details details summary {
	font-size: 16px;
}