JSFiddle - React, Tailwind, and code Playground
HTML
<div class="fiddle-timeline left">
<a class="twitter-timeline" href="https://twitter.com/caitp88">Tweets by caitp88</a>
</div>
<div class="fiddle-timeline right">
<a class="twitter-timeline" href="https://twitter.com/caitp88">Tweets by caitp88</a>
</div>
CSS
.fiddle-timeline {
width: 45%;
}
.left {
float: left;
}
.right {
margin-left: 50%;
}
JavaScript
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
twttr.ready(function(twttr) {
twttr.events.bind("rendered", function(event) {
var widgetIframe = event.target;
if (widgetIframe.parentNode.className != "fiddle-timeline left") {
return;
}
var style = widgetIframe.contentDocument.createElement("style");
style.innerHTML = "div.timeline-Tweet--isRetweet { display: none}";
widgetIframe.contentDocument.head.appendChild(style);
});
});