JSFiddle - React, Tailwind, and code Playground

HTML

<!-- PAGE LAYOUT -->
<div class="master-bio-container">
<div class="professor__side">

<div class="professor__profile">

<div class="fa fa-plus-circle slide-trigger"></div>

<div class="slide-in-container">
  <h1>Love {{ professor }}'s Content?</h1>
  <p>Subscribe via email for exclusive emails sent directly by {{ professor }}!</p>
</div>

<img src="http://cdn2.hubspot.net/hubfs/137828/_images/Bio-Page-Headshots/Portrait-{{ professor|cut(' ') }}.png" alt="Photo of {{ professor }}">

  <h1>{{ professor }}</h1>
  <p>{{ widget_data.professor_fun_fact.value }}</p>

<div class="professor__socialmedia"><!-- If Professor uses a social media, show icon, if not, then hide icon -->

{% if widget_data.professor_facebook.value %}
<a href="{{ widget_data.professor_facebook.value }}"><div class="fa fa-facebook social-icons" aria-hidden="true"></div></a>
{% else %}

{% endif %}

{% if widget_data.professor_twitter.value %}
<a href="https://www.twitter.com/{{ widget_data.professor_twitter.value }}"><div class="fa fa-twitter social-icons" aria-hidden="true"></div></a>
{% else %}

{% endif %}

{% if widget_data.professor_linkedin.value %}
<a href="{{ widget_data.professor_linkedin.value }}"><div class="fa fa-linkedin social-icons" aria-hidden="true"></div></a>
{% else %}

{% endif %}

{% if widget_data.professor_googleplus.value %}
<a href="{{ widget_data.professor_googleplus.value }}"><div class="fa fa-google-plus social-icons" aria-hidden="true"></div></a>
{% else %}

{% endif %}
</div>

</div>
<div class="course-duties">Course Responsibilities</div>
<div class="professor_responsibilities"> {{ widget_data.course_responsibilities_0.value }}</div>
<div class="professor_responsibilities"> {{ widget_data.course_responsibilities_1.value }}</div>
<div class="professor_responsibilities"> {{ widget_data.course_responsibilities_2.value }}</div>

</div>

<div class="professor__tabs">
  <div class="tabs__head" data-relationship="intro">Intro</div>
  <div class="tabs__body"...

CSS

.bio-pages .body-container-wrapper {
  background: #EEE;
  border-bottom: 5px solid #d8d8d8;
  border-top: 5px solid #d8d8d8;
}

.bio-pages-container {
  max-width: 1180px;
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin: 45px auto 0;
}

.master-bio-container {
    max-width: 1090px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 15px;
}

.professor__side {
    flex: 1 1 15px;
}

.professor__profile {
    background: #FFF;
    display: Block;
    border-radius: 6px;
    width: 100%;
    padding: 48px 15px;
    border-bottom: #BBB 3px solid;
    max-width: 19rem;
    overflow:hidden;
    position:relative;
}

.course-duties{
    max-width: 19rem;
    margin: 5px 0;
    font-size: 20px;
    text-align:center;
}
    
.professor_responsibilities{

    background: #FFF;
    display: Block;
    border-radius: 6px;
    width: 100%;
    padding: 14px;
    border-bottom: #BBB 3px solid;
    max-width: 19rem;
    overflow: hidden;
    position: relative;
    text-align: center;
    font-size: 19px;
    margin: 0px 0 15px;
}

.slide-trigger{
    position: absolute;
    right: 25px;
    top: 20px;
    z-index: 2;
    font-size: 34px;
    color: #585858;
    -webkit-transition:1s;
}

.slide-in-container h1{
        color: #FFF;
    line-height: 30px;
}

.slide-in-container p{
	color: #FFF !important;
    line-height: 24px;
    margin-top: 6px !important;
    font-size: 14px;
}

.rotated{
     -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition:1s;
    color: #FFF;
}

.slide-in-container{
    background: #585858;
    display: block;
    border-radius: 6px;
    width: 100%;
    padding: 48px 15px;
    border-bottom: #BBB 3px solid;
    max-width: 19rem;
    height: 100%;
    position: absolute;
    left: -305px;
    top: 0;
    -webkit-transition:1s;
   ...

JavaScript

$('.slide-trigger').on('click', function() {
    $('.slide-in-container').toggleClass('triggered');
    $('.slide-trigger').toggleClass('rotated');
});

// tweet stream

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define([], factory);
  } else if (typeof exports === 'object') {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory();
  } else {
    // Browser globals.
    factory();
  }
}(this, function() {
  var domNode = '';
  var maxTweets = 20;
  var parseLinks = true;
  var queue = [];
  var inProgress = false;
  var printTime = true;
  var printUser = true;
  var formatterFunction = null;
  var supportsClassName = true;
  var showRts = true;
  var customCallbackFunction = null;
  var showInteractionLinks = true;
  var showImages = false;
  var targetBlank = true;
  var lang = 'en';
  var permalinks = true;
  var dataOnly = false;
  var script = null;
  var scriptAdded = false;

  function handleTweets(tweets){
    if (customCallbackFunction === null) {
      var x = tweets.length;
      var n = 0;
      var element = document.getElementById(domNode);
      var html = '<ul>';
      while(n < x) {
        html += '<li>' + tweets[n] + '</li>';
        n++;
      }
      html += '</ul>';
      element.innerHTML = html;
    } else {
      customCallbackFunction(tweets);
    }
  }

  function strip(data) {
    return data.replace(/<b[^>]*>(.*?)<\/b>/gi, function(a,s){return s;})
        .replace(/class="(?!(tco-hidden|tco-display|tco-ellipsis))+.*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi,
        '');
  }

  function targetLinksToNewWindow(el) {
    var links = el.getElementsByTagName('a');
    for (var i = links.length - 1; i >= 0; i--) {
      links[i].setAttribute('target', '_blank');
    }
  }

  function getElementsByClassName (node, classname) {
    var a...