JSFiddle - React, Tailwind, and code Playground

by webjoule

HTML

<div class="Portfolio">
					<div class="container">
						<div class="headline">Portfolio</div>
						<div class="masonry-container">
							<div class="row">
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_1271.jpg"><img src="img/gallery/tumblr_1271.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_5330.jpg"><img src="img/gallery/tumblr_5330.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_1280.jpg"><img src="img/gallery/tumblr_1280.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_5110.jpg"><img src="img/gallery/tumblr_5110.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_5048.jpg"><img src="img/gallery/tumblr_5048.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_5083.jpg"><img src="img/gallery/tumblr_5083.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_5011.jpg"><img src="img/gallery/tumblr_5011.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_5602.jpg"><img src="img/gallery/tumblr_5602.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_5016.jpg"><img src="img/gallery/tumblr_5016.jpg" alt=""></a></div>
								<div class="col-sm-4 item"><a href="img/gallery/tumblr_5071.jpg"><img src="img/gallery/tumblr_5071.jpg" alt=""></a></div>
							</div>
						</div>

					</div>
				</div>

JavaScript

$(document).ready(function() {

    var $container = $(".masonry-container");
    $container.imagesLoaded(function () {
        $container.masonry({
            columnWidth: ".item",
            itemSelector: ".item"
        });
    });

    $('.masonry-container a').magnificPopup({
       type: 'image',
       // other options
       gallery: {
       enabled:true
      }
  });
});
//Nicescroll jQuery plugin for a better scroll on desktop and mobile device
$(function() {
    $("html").niceScroll({
        scrollspeed: 60,
        mousescrollstep: 45,
        cursorwidth: 10,
        cursorborder: 0,
        cursorcolor: '#0342d4',
        cursorborderradius: 2,
        autohidemode: false,
        horizrailenabled: false
    });

  $('html').addClass('no-overflow-y');
});