JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="mfp-wrap  mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow-y: auto; overflow-x: hidden;"><div class="mfp-container mfp-s-ready mfp-inline-holder"><div class="mfp-content"><div class="first-visit"><p class="text">Follow us on Facebook!</p><div class="content"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fomgubuntu&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=357989930977146"></iframe></div><p class="cookies-notice">This site uses cookies. <a href="/privacy-policy">Learn more</a>.<br> By continuing to use this site, you consent to our use of these cookies.</p><button title="Close (Esc)" type="button" class="mfp-close">×</button></div></div><div class="mfp-preloader">Loading...</div></div></div>

CSS

.mfp-bg { /* Magnific Popup CSS */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 502;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }
.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 503;
  position: fixed;
  -webkit-backface-visibility: hidden; }
.mfp-container {
  height: 100%;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px }
.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }
.mfp-align-top .mfp-container:before { display: none }
.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 505; }
.mfp-inline-holder .mfp-content { width: 100%; cursor: auto }
.mfp-loading.mfp-figure { display: none }
.mfp-hide { display: none }
.mfp-preloader {
  color: #cccccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 504; }
.mfp-preloader a { color: #cccccc; }
.mfp-preloader a:hover { color: white }
.mfp-s-ready .mfp-preloader { display: none }
.mfp-s-error .mfp-content { display: none }
button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  display: block;
  padding: 0;
  z-index: 506; }
.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: white;
  font-style: normal;
  font-size: 28px;}
.mfp-close:hover, .mfp-close:focus { opacity: 1 }
.mfp-close:active { top: 1px }
.mfp-close-btn-in .mfp-close { color: #333333 }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: white;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }
.mfp-counter {
  position: absolute;
 ...

JavaScript

<script type="text/javascript"> // Facebook like popup
  var completedKey = "omg_first_visit_completed";
  if (!(new RegExp("(?:^|;\\s*)" + completedKey + "\\s*\\=")).test(document.cookie)) {
    document.cookie = completedKey + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
    if (typeof $.magnificPopup === 'undefined') {
      var magnific = document.createElement('script');
      magnific.type = 'text/javascript';
      magnific.async = true;
      magnific.src = 'http://www.omgubuntu.co.uk/wp-content/plugins/omg-first-visit/magnific.min.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(magnific, s);
    } else { console.log("Magnific already defined!"); }
    $.magnificPopup.open({
      items: {
        src: '<div class="first-visit">' +
        '<p class="text">Follow us on Facebook!</p>' +
        '<div class="content">' + '<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fomgubuntu&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=357989930977146"></iframe>' + '</div>' +
        '<p class="cookies-notice">This site uses cookies. <a href="/privacy-policy">Learn more</a>.<br> By continuing to use this site, you consent to our use of these cookies.</p>' +
        '</div>',
        type: 'inline'
      }
    });
  }
</script>