JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

  									<div class="half">
    									
   	 									<div class="tab">
      										<input id="tab-one" type="checkbox" name="tabs">
      										<label for="tab-one">Self Study Guides + Meeting in a Box</label>
      										<div class="tab-content">
        										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      										</div>
    									</div>
    									<div class="tab">
      										<input id="tab-two" type="checkbox" name="tabs">
      										<label for="tab-two">Podcasts</label>
      										<div class="tab-content">
        										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      										</div>
    									</div>
    									<div class="tab">
      										<input id="tab-three" type="checkbox" name="tabs">
      										<label for="tab-three">Nano eLearns</label>
      										<div class="tab-content">
        										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      										</div>
    									</div>
    									<div class="tab">
      										<input id="tab-four" type="checkbox" name="tabs">
      										<label for="tab-four">Additional Resources</label>
      										<div class="tab-content">
        										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere...

CSS

body 
{
  color: #2c3e50;
  background: #ecf0f1;
}

h1 
{
  text-align: center;
}

.half 
{
  float: left;
  width: 100%;
  padding: 0 1em;
}

/* Acordeon styles */
.tab 
{
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #000000;
  overflow: hidden;
  border-bottom-color: #000000;
  border-bottom-style:solid;
  border-bottom-width: 1px;
}

input 
{
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label 
{
  position: relative;
  display: block;
 /* padding: 0 0 0 1em;*/
  background: #ffffff;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
  margin-bottom: 0px !important;
}

.blue label 
{
  background: #2980b9;
}

.tab-content 
{
  max-height: 0;
  overflow: hidden; 
  background: #ffffff;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  font-color: black;
}

.blue .tab-content 
{
  background: #3498db;
}

.tab-content p 
{
  margin: 1em;
}

/* :checked */
input:checked ~ .tab-content 
{
  max-height: 10em;
}

/* Icon */
label::after 
{
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

input[type=checkbox] + label::after 
{
  content: "+";
}

input[type=radio] + label::after 
{
  content: "\25BC";
}

input[type=checkbox]:checked + label::after 
{
  transform: rotate(315deg);
}

input[type=radio]:checked + label::after 
{
  transform: rotateX(180deg);
}

JavaScript

$(function() {
    $("#accordion").accordion({
        event: "mouseover"
    });
    $(".Title:not(.ui-state-active)").fadeTo(1,0.25);
    $(".Title").hover(function () {
        $(this).stop().fadeTo(250,1)
            .closest(".Title").find(".links").fadeTo(250,0.75);
    }, function() {
        $(".Title").fadeTo(1,0.25);
        if ($(this).is('.ui-state-active')) {
            $(this).stop().fadeTo(250,1);
        }
    });
});