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

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

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