JSFiddle - React, Tailwind, and code Playground

by webjoule

HTML

<!DOCTYPE html>
	<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Alex Oleinikov  — Graphic Designer | Freelancer | Portfolio</title>
		<!-- CSS -->
		<link rel="stylesheet" href="css/bootstrap-grid-v3.3.6.min.css" />
		<link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
		<link rel="stylesheet" href="css/style.css"  type="text/css">
		<!-- JS -->
		<script src='js/modernizr.js'></script>

	</head>  
	<body>
		<div class="wrapper">
			<header>
				<div class="header-top">
					<div class="container">
						<div class="logo"></div>
						<ul class="wg-list">
							<li class="wg-item vk"><a href="#" target="_blank"></a></li>
							<li class="wg-item you"><a href="#" target="_blank"></a></li>
							<li class="wg-item gplus"><a href="#" target="_blank"></a></li>
						</ul>
					</div>
				</div>

				<div class="headerbg">
					<div class="container">
						<div class="headline">We bring your<br>brilliant design for life</div>
						<div class="subline">ВКонтакте — это социальная сеть для быстрой и удобной<br>
							коммуникации между людьми по всему миру.</div>
						</div>
					</div>				

					<nav class="nav-main">
						<div class="container">
							<ul class="main-menu">			
								<li class="active"><a href="#">Illustration</a></li>
								<li class=""><a href="#">Portrait</a></li>
								<li class=""><a href="#">Animation</a></li>
								<!-- <li class="active-marker" style="display: block; width: 108px; left: 0px;"></li>-->
							</ul>
						</div>
					</nav>

				</header>

				<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...

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');
});