JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
        <title>Images</title>

		<!--[if IE]>
			<link href="jphotogrid.ie.css" rel="stylesheet" type="text/css" media="screen" />
		<![endif]--> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="example/jphotogrid.js"></script>
		<script src="example/jflickrfeed.js"></script>
		<script src="example/setup.js"></script>
    
    <body>
        
        <div class="header">
        </div>                    
        <span class="menu-Trigger" align="center" >&#9776; Menu</span>
        <div class="nav-menu">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href=#>VIDEOS</a></li>
                <li class="current"><a href="Images.html">IMAGES</a></li>
                <li><a href=#>EVENTS</a></li>
                <li><a href=#>TESTIMONIALS</a></li>
                <li><a href="Contact.html">ENQUIRIES</a></li>
            </ul>
        </div>
        
        <div class="main">
            <ul id="pg">
                <li>
					<img src="http://farm4.static.flickr.com/3647/3435384001_9ed9864bb4.jpg" alt="DSC_0660">
					<p>DSC_0660</p>
				</li>
				<li>
					<img src="http://farm4.static.flickr.com/3311/3436188742_caaa28c689.jpg" alt="DSC_0698">
					<p>DSC_0698</p>
				</li>
				<li>
					<img src="http://farm4.static.flickr.com/3371/3436188466_418a0d8a06.jpg" alt="DSC_0668">
					<p>DSC_0668</p>
				</li>
				<li>
					<img src="http://farm4.static.flickr.com/3397/3436188128_5e503cefcd.jpg" alt="DSC_0704">
					<p>DSC_0704</p>
				</li>
				<li>
					<img src="http://farm4.static.flickr.com/3300/3436187796_4d228a5bde.jpg" alt="DSC_0699">
					<p>DSC_0699</p>
				</li>
				<li>
					<img src="http://farm4.static.flickr.com/3386/3435382439_68b5e3742b.jpg" alt="DSC_0602">
					<p>DSC_0602</p>
				</li>
				<li>
					<img src="http://farm4.static.flickr.com/3657/3436187288_e84058f54b.jpg"...

CSS

body {
                background-color: black;
            }
            

            .icons {
                text-align: center;
                bottom:0px;
                position:relative;
                left:0;
                width:100%;
            }    
            .main {
                width: 700px; 
                margin: 0 auto; 
                text-align: left; 
}
            
#pg { 
    position: relative; 
    height: 585px; 
    background: #000; 
    margin-bottom: 50px;
    margin-top: 50px;
}

#pg li { 
    position: relative; 
    list-style: none; 
    width: 175px; 
    height: 300px; 
    overflow: hidden; 
    float: left; 
    z-index: 2; 
    opacity: .6; 
}

#pg li.active { 
    opacity: 1; 
    border-color: white;
}

#pg li.selected { 
    opacity: 1; 
    z-index: 99; 
    -moz-box-shadow: 0px 0px 10px #fff; 
    -webkit-box-shadow: 0px 0px 10px #fff; 
}

#pg li img { 
    display: block; 
    width: 100%; 
}

#pg li p { 
    color: white; 
    margin: 10px 0; 
    font-size: 12px; 
}