JSFiddle - React, Tailwind, and code Playground
by kodjoe mambi
HTML
<script src="http://www.500milligrammes.com/facticemagazine/final/addon/modal/jquery.remodal.js"></script>
<script src="http://www.500milligrammes.com/facticemagazine/final/addon/modal/bundle.js"></script>
<link rel="stylesheet" href="href="http://www.500milligrammes.com/facticemagazine/final/addon/modal/bundle.css">
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<div class="remodalshare-bg">
<a href="#follow">FOLLOW</a>
</div>
<div style="height:auto;" class="remodalshare" data-remodalshare-id="follow">
<div style="position: absolute; top:5px; right:10px; border:0px;z-index:9999999;" class="remodalshare-closeposition">
<a href="#" data-remodalshare-action="close" class="remodalshare-close" aria-label="Close">
<img src="http://www.500milligrammes.com/facticemagazine/final/addon/modal/x.png" alt="close"/>
</a>
</div>
TEST
</div>CSS
*, *:after, *:before { padding: 0;margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1; }
html, body { height: 100%;}
.identifiant {text-align:center;}
img, object, embed { max-width: 100%; border: 0px none; }
body {padding: 0px; margin: 0px auto; font-weight:400; font-family:"open_sansregular", "Arial", sans-serif; background: url("http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border:0px solid #fff; line-height:1.5em}
.remodalshare-is-active .remodalshare-bg {
background: url("http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-filter: blur(8px);
-ms-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
filter: blur(8px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='8');
}
/* ----- Modal with share button ----- */
.sharepositionabout { margin:20px 0px 20px 0px; width:100%; text-align:left; }
html.remodalshare-is-locked { overflow: hidden; }
.page, .remodalshare { -webkit-text-size-adjust:100% }
/* Anti FOUC */
.remodalshare,[data-remodalshare-id] { display:none }
/* Necessary styles of the overlay */
.remodalshare-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; background: #fff; background:rgba(255,255,255,1) }
/* Necessary styles of the wrapper...