JSFiddle - React, Tailwind, and code Playground

HTML

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,400italic,600' rel='stylesheet' type='text/css'>


<p class="description">Find and fix the three small JS errors in the JS box. No addtional CSS or HTML is needed. </p>

<div class="accordion">

  <h3>First item</h3>

  <ul>
    <li>This is a first list item</li>
    <li>This is a second list item</li>
    <li>This is a third list item</li>
  </ul>


  <h3>Second item</h3>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <ul>
    <li>This is a first list item</li>
    <li>This is a second list item</li>
    <li>This is a third list item</li>
  </ul>

  <h3>Third item</h3>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <ul>
    <li>This is a first list item</li>
    <li>This is a second list item</li>
    <li>This is a third list item</li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <h3>Fourth item</h3>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <ul>
    <li>This is a first list item</li>
    <li>This is a second list item</li>
    <li>This is a third list item</li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut...

CSS

body {
  background: white;
  font-family: 'Open Sans', arial;
  margin: 0px;
  padding: 20px;
  line-height: 1.6em;
  font-size: 100%;
}

.description {
  background: #dedede;
  font-size: 13px;
  padding: 10px 15px;
  line-height: 1.5em
}

.accordion {
  margin-bottom: 20px;
}

.accordion * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.accordion .accordion-item-header {
  margin: 0px;
  padding: 0px;
  font-weight: 600;
  font-size: 110%;
  padding-right: 60px;
  color: black;
}

.accordion .accordion-item {
  margin-bottom: 10px;
}

.accordion .accordion-item .inner {
  background: #f0f0f0;
  padding: 30px;
  border-radius: 3px;
  /* border: 2px solid #dedede; */
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.accordion .accordion-item ul li {
  margin-bottom: 5px;
}

.accordion .accordion-item .accordion-content {
  margin-top: 20px;
  display: none;
}

.accordion .accordion-item .accordion-control {
  float: right;
  cursor: pointer;
  font-size: 90%;
  font-weight: 600;
  color: #c75c1c;
  text-decoration: none;
  position: relative;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  padding: 0px;
}

.accordion .accordion-item.active .inner {
  background: #f7f7f7;
}

.accordion .accordion-item.active .accordion-content {
  display: block;
}

.accordion .accordion-item.active .accordion-control {
  color: #a7a7a7;
}

JavaScript

var itemHeader = $(".accordion *:header"),
  itemHeaderClass = "accordion-item-header",
  itemWrapperHTML = "<div class='accordion-item'/>",
  itemContentClass = "accordion-content",
  itemContentHTML = "<div class='" + itemContentClass + "'></div>",
  itemControlClass = "accordion-control",
  itemControlContent = "View",
  itemControlHTML = "<div class='" + itemControlClass + "'>" + itemControlContent + "</div>";

$(itemHeader).each(
  function() {
    $(this).addClass(itemHeaderClass);
    $(this).nextUntil(itemHeader).addBack().wrapAll(itemWrapperHTML).wrapAll("<div class='inner'/>");
    $(this).nextUntil(itemHeader).wrapAll(itemContentHTML);
  });

$('.' + itemContentClass).each(
  function() {
    $(this).parent().prepend(itemControlHTML);
    $(this).parent().addClass("content");
  });

$('.accordion-control').click(function() {
  $(this).parents().eq(1).toggleClass("active");
});