JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<ul id="random5a93f3a27146a8_group" role="group">
  <li class="type_course depth_2 contains_branch" data-type="20" data-has-icon="0" aria-labelledby="label_2_6">
    <p class="branch" role="treeitem" id="expandable_branch_20_10" aria-expanded="false" data-requires-ajax="true" data-loaded="false" data-node-id="expandable_branch_20_10" data-node-key="10" data-node-type="20"><a tabindex="-1" id="label_2_6" title="Cherie Test course" href="https://dev.vle.internal.admin.cam.ac.uk/course/view.php?id=10">Cherie Test course</a></p>
  </li>
  <li class="type_course depth_2 contains_branch" data-type="20" data-has-icon="0" aria-labelledby="label_2_7">
    <p class="branch" role="treeitem" id="expandable_branch_20_8" aria-expanded="false" data-requires-ajax="true" data-loaded="false" data-node-id="expandable_branch_20_8" data-node-key="8" data-node-type="20"><a tabindex="-1" id="label_2_7" title="Part II Biochemistry 2017-18" href="https://dev.vle.internal.admin.cam.ac.uk/course/view.php?id=8">Part II Biochemistry 2017-18</a></p>
  </li>
  <li class="type_course depth_2 contains_branch" data-type="20" data-has-icon="0" aria-labelledby="label_2_8">
    <p class="branch" role="treeitem" id="expandable_branch_20_9" aria-expanded="false" data-requires-ajax="true" data-loaded="false" data-node-id="expandable_branch_20_9" data-node-key="9" data-node-type="20"><a tabindex="-1" id="label_2_8" title="Secondary ML 17-18" href="https://dev.vle.internal.admin.cam.ac.uk/course/view.php?id=9">Secondary ML 17-18</a></p>
  </li>
  <li class="type_course depth_2 contains_branch" data-type="20" data-has-icon="0" aria-labelledby="label_2_9">
    <p class="branch" role="treeitem" id="expandable_branch_20_14" aria-expanded="false" data-requires-ajax="true" data-loaded="false" data-node-id="expandable_branch_20_14" data-node-key="14" data-node-type="20"><a tabindex="-1" id="label_2_9" title="Certificate in Genetics - Lent"...