JSFiddle - React, Tailwind, and code Playground

by Xandour

HTML

<div id="info-block">
    <div id="twaewsit-content">	<span class="header">This Week @ EWSIT</span>

    </div>
    <div id="ue-content">	<span class="header">Upcoming Events</span>

    </div>
    <div id="twit-content" style="border:none !important;">	<a class="twitter-timeline" href="https://twitter.com/EWSITGOGREEN" data-widget-id="362066477261680640">Tweets by @EWSITGOGREEN</a>

        <script>
            ! function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0],
                    p = /^http:/.test(d.location) ? 'http' : 'https';
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = p + "://platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, "script", "twitter-wjs");
        </script>
    </div>
</div>

CSS

#info-block {
    padding:20px 0 20px 0;
    width:100%;
    text-align:center;
}
#info-block > div {
    height:250px;
    width:30%;
    max-height:250px;
    overflow-y:hidden;
    display:inline-block !important;
    border:1px solid #e8e8e8;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font:normal normal normal 12px/16px"Helvetica Neue", Arial, sans-serif;
}
#info-block > div > .header {
    display:block;
    padding:8px;
    font-weight:bold;
    font-size:14px;
    text-align:left;
    border-bottom-style:solid;
    border-bottom-color:#e8e8e8;
    border-bottom-width:1px;
}

#twaewsit-content,#ue-content,#twit-content{
     float:left !important;   
}
}