JSFiddle - React, Tailwind, and code Playground

by nerdycap007

HTML

<script src="https://raw.githubusercontent.com/bigbite/macy.js/master/dist/macy.js"></script>
<div class="container-xl masonry">

  <div class="item"><blockquote class="twitter-tweet"><a href="https://twitter.com/vortex_ape/status/1189449251853459459"></a></blockquote></div>
  <div class="item"><blockquote class="twitter-tweet"><a href="https://twitter.com/ripienaar/status/1208347453864448001"></a></blockquote></div>
  <div class="item"><blockquote class="twitter-tweet"><a href="https://twitter.com/NafisFaysalMir/status/1218161317476876288"></a></blockquote></div>
  <div class="item"><blockquote class="twitter-tweet"><a href="https://twitter.com/hackintoshrao/status/1220955457101225985"></a></blockquote></div>
  <div class="item"><blockquote class="twitter-tweet"><a href="https://twitter.com/FanaHOVA/status/1242664683527692289"></a></blockquote></div>
  <div class="item"><blockquote class="twitter-tweet"><a href="https://twitter.com/saini_pratyaksh/status/1243465737035034625"></a></blockquote></div>

</div>

JavaScript

// Twitter widget is loading.
window.twttr = function(d, s, id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  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);
  return window.twttr || (t = {
    _e: [],
    ready: function(f) {
      t._e.push(f)
    }
  });
}(document, 'script', 'twitter-wjs');

// When widget is ready, run masonry
twttr.ready(function(twttr) {
  twttr.events.bind('loaded', function(event) {
    var masonry = new Macy({
      container: '.masonry',
      trueOrder: false,
      waitForImages: false,
      useOwnImageLoader: false,
      debug: true,
      mobileFirst: true,
      columns: 1,
      margin: {
        y: 16,
        x: '2%',
      },
      breakAt: {
        1200: 6,
        940: 5,
        520: 3,
        400: 2
      },
    });
  });
});