JSFiddle - React, Tailwind, and code Playground

HTML

<!-- control profile tabber -->
<script>
jQuery(function($) {
    $('.professor__tabs').each(function() {

      $('.tabs__body', this).addClass('tabs__body--is-hidden');
      $('.tabs__head', this).on('click', function(index) {


        var test = $(this).index();

        $('.tabs__body').addClass('tabs__body--is-hidden');
        $('.tabs__head')
          .removeClass('tabs__head--is-active')
          .filter( $(this) )
          .addClass('tabs__head--is-active')
          .next('.tabs__body')
          .removeClass('tabs__body--is-hidden');

      })
        .filter(':first')
        .click();
    });
});
</script>


<!-- 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"> HELLO </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 %}

{%...

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;
}

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

.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;
    z-index:1;
}

.triggered{
    -webkit-transition:1s;
    left:0;
}

.professor__socialmedia {
  max-width: 200px;
  margin: 14px auto 0;
  display: block;
  text-align: center;
}

.professor__socialmedia a {
  color: #585858;
  font-size: 19px;
  margin: 0 8px;
}

.professor__profile img {
  width: 130px;
  height: 130px;
  display: block;
  margin: 0px auto -12px;
  border-radius: 100%;
  border: 1px solid #585858;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  font-size: 1.6em;
  text-align: center;
  font-weight: 400;
  text-transform: none;
}

h2 {
  color: #3B3F3F;
 ...

JavaScript

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

$('.tabs__body--is-hidden').css('display','none');

// 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...