JSFiddle - React, Tailwind, and code Playground

by Nicholas Vaughn

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      [data-toggle="collapse"][aria-expanded="true"] > .js-rotate-if-collapsed {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
      }

    </style>
  </head>

  <body>


    <div id="accordion" style="cursor: pointer" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false">
        <span class="glyphicon glyphicon-triangle-right js-rotate-if-collapsed"></span>
        <a href="#">Nicky's Folders<span class="small-reg">&reg;</span></a>
        <hr class="half-rule" />
      <ul id="collapseExample" class="collapse">
        <li style="cursor: pointer" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false">
          <span class="glyphicon glyphicon-triangle-right js-rotate-if-collapsed"></span>
          <a href="#">2-Pockets</a>
          <ul id="collapseExample" class="collapse">
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>Version II<small>(NF VER II)</small></a></li>
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>Communicator</a>
              <ul>
                <li><a href="#">English</a></li>
                <li><a href="#" style="overflow: wrap;">Spanish Multilanguage</a></li>
              </ul>
            </li>
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>Class Work</a></li>
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>Homework</a></li>
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>CPA</a>
              <ul>
                <li><a href="#">Version 10</a></li>
                <li><a href="#">Version 11</a></li>
              </ul>
    ...