JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal">
<input id="modal" type="checkbox" name="modal" tabindex="1" style="opacity:0; position:absolute;"/>
<label class="opener" for="modal">Credits</label>
<div id="dialog" class="modal__overlay">

<div class="closemenuposition"><label for="modal"><div id="closemenu">X</div></label></div>


<div class="credits">
<h2>CREDITS</h2>

<div class="container">
<ul class="rig columns-4">

<li>
<img src="0.png" alt="logo"/>
<div class="slidetext"><p>Irisgasse 2 Am Hof, 1010 Vienna</p></div>
</li>

<li>
<img src="1.png" alt="logo"/>
<div class="slidetext"><p>Wollzeile 11/Sort.Lad.55, 1010 Vienna</p></div>
</li>





</ul>
</div>
</div>



</div>
</div>














<br/><br/><br/><br/><br/><br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
<p>Nam ultrices dignissim sapien, eu euismod elit ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem orci, rhoncus ac mi et, gravida tincidunt mi. Pellentesque ac iaculis urna, ut mollis enim. In eleifend mauris turpis, interdum ultricies mi interdum eleifend. Fusce tristique, elit nec ornare tempor, nibh nulla vehicula eros, sed accumsan dui est vitae arcu. Duis ut sem efficitur, imperdiet diam ac, mattis nisi.</p>
<p>Aliquam quis orci tempor, iaculis quam at, commodo elit. Ut varius, diam vel finibus consectetur, tellus dolor cursus nisi, vel pulvinar nisl massa eu urna. Quisque pharetra rhoncus mauris, in pulvinar libero suscipit et. Proin interdum sodales elit, eget feugiat erat venenatis a. In sit amet urna sem. Maecenas vitae metus sed augue consequat auctor. Nam...

CSS

* { padding:0; margin:0; }
body { background: #fff; overflow: hidden; font-family: 'Arial', sans-serif; overflow: scroll; }


/* bouton X pour fermer */
#closemenu {
font-family:"Raleway", "Arial", sans-serif;
font-size: 3em;
font-weight:100;
border: 0px solid #fff;
text-align: right;
color:#000;
background:none;
-webkit-transition: all .3s ease; 
-moz-transition: all .3s ease; 
-o-transition: all .3s ease; 
transition: all .3s ease; 
}


@media (max-width: 768px)  {#closemenu {font-size: 2.7em; } }
@media (max-width: 650px)  {#closemenu {font-size: 2.5em; } }
@media (max-width: 533px)  {#closemenu {font-size: 2.3em; } }
@media (max-width: 450px)  {#closemenu {font-size: 2.1em; } }
@media (max-width: 350px)  {#closemenu {font-size: 1.7em; } }
@media (max-width: 300px)  {#closemenu {font-size: 1.5em; } }




#closemenu:hover { background: none; color:#e0ccb4; }

.closemenuposition {
z-index:9997; 
position: fixed; 
top:20px; 
right:20px; 
max-height:40px; 
max-width:40px; 
background: none repeat scroll 0% 0% transparent;
border:0; 
}



/* ----- GRID GALLERY ----- */

ul.grid-nav { list-style: none; }

ul.grid-nav li { display: inline-block; }

ul.rig li img { width:100%; }

ul.grid-nav li a { display: inline-block; background: #999; text-decoration: none; border: 0px; }

.grid-container { display: none; }

ul.rig.columns-4 li { width:90%; max-width: 300px; max-height:auto;  text-align: left;}


/* ----- Image grids ----- */
ul.rig { list-style: none;  margin: 0;}
ul.rig li {
display: inline-block;
margin: 50px 10px;
background: none;
border: 0px solid #ddd;
vertical-align: top;
box-shadow: 0px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}




@media (max-width: 480px) {
ul.grid-nav li { display: block; }
ul.grid-nav li a { display: block; }
ul.rig { margin: 0; }
ul.rig li { width: 100%; padding: 10px; }
}



















.credits { margin-top: 200px; }
input:focus + label { -webkit-transform: scale(0.97);...