JSFiddle - React, Tailwind, and code Playground

by WoJWoJ

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;
 }