JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body-twitterFeed">
            <a class="twitter-timeline" href="https://twitter.com/hoffmannjoe" data-widget-id="347000705833398272" height="700" data-chrome="noscrollbar transparent" border-color="#DBDBDB">Tweets by @ARavinMadMonkey</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>

CSS

#body-twitterFeed{
height: 80%;
padding: 5px 10px 5px 10px;
overflow: hide;
}
@media screen and (max-height: 30rem) {
    .twitter-timeline {
        height: 15rem;
    }
}
@media screen and (min-height: 30rem) {
    .twitter-timeline {
        height: 25rem;
    }
}