JSFiddle - React, Tailwind, and code Playground

by dimitrismovin

HTML

<div class="onp-sl onp-sl-webkit onp-sl-secrets onp-sl-social-locker onp-sl-social-buttons-frist onp-sl-contains-single-group onp-sl-social-buttons-enabled onp-sl-no-touch">
  <div class="onp-sl-outer-wrap">
    <div class="onp-sl-inner-wrap">
      <div class="onp-sl-screen onp-sl-screen-default">
        <div class="onp-sl-group onp-sl-social-buttons onp-sl-first-group onp-sl-single-group onp-sl-group-index-1 onp-sl-has-counters onp-sl-horizontal onp-sl-lang-en_US">
          <div class="onp-sl-group-inner-wrap">
            <div class="onp-sl-text">
              <div class="onp-sl-header onp-sl-strong">Want The Template?</div>
              <div class="onp-sl-message">
                <p>I can't tell you how many hours I've spent writing this post for you. If you want the template, all I ask is to share this with some friends.</p>
              </div>
            </div>
            <div class="onp-sl-control onp-sl-facebook-like onp-sl-facebook onp-sl-flip" style="z-index: 50;">
              <div class="onp-sl-control-inner-wrap">
                <a href="#" class="onp-sl-button-overlay" style="z-index: 50;">
                  <div class="onp-sl-overlay-back" style="z-index: -1;"></div>
                  <div class="onp-sl-overlay-front" style="z-index: 1;">
                    <div class="onp-sl-overlay-icon"></div>
                    <div class="onp-sl-overlay-line"></div>
                    <div class="onp-sl-overlay-text">Like</div>
                  </div>
                  <div class="onp-sl-overlay-header" style="z-index: 1;"></div>
                </a>
                <div class="onp-sl-social-button onp-sl-social-button-facebook-like">
                  <div data-show-faces="false" data-send="false" data-href="https://www.facebook.com/hellowebris" data-font="tahoma" data-colorscheme="light" data-layout="button_count" data-action="like" class="fb-like fb_iframe_widget" fb-xfbml-state="rendered"
                 ...

CSS

.onp-sl-secrets {
  margin: 30px auto 35px;
  border: 0;
  background-color: transparent;
}

.onp-sl-secrets .onp-sl-outer-wrap {
  border: 1px solid #e6e6e6;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, .08);
  box-shadow: 0 0 40px rgba(0, 0, 0, .08);
}

.onp-sl-secrets .onp-sl-inner-wrap {
  border: 3px solid #fefefe;
  background-color: #f7f7f7;
}

.onp-sl .onp-sl-inner-wrap {
  position: relative;
  overflow: visible;
}

.onp-sl .onp-sl-social-buttons {
  text-align: center;
  padding: 30px;
}

.onp-sl .onp-sl-social-buttons .onp-sl-text {
  margin-bottom: 3px;
}

.onp-sl-secrets .onp-sl-text,
.onp-sl-secrets .onp-sl-timer,
.onp-sl-secrets .onp-sl-timer * {
  -webkit-text-shadow: 1px 1px 2px #fff;
  -moz-text-shadow: 1px 1px 2px #fff;
  text-shadow: 1px 1px 2px #fff;
}

.onp-sl .onp-sl-header,
.onp-sl .onp-sl-text .onp-sl-strong {
  font-size: 18px;
  line-height: 130%;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 7px;
}

.onp-sl-secrets .onp-sl-text .onp-sl-strong:after,
.onp-sl-secrets .onp-sl-text .onp-sl-strong:before {
  content: " ";
  display: inline-block;
  width: 11px;
  height: 14px;
  margin: 0 9px;
  background: url("http://webris.org/wp-content/plugins/sociallocker-next-premium/bizpanda/assets/img/lock-icon.png") 0 2px no-repeat;
}

.onp-sl .onp-sl-text p {
  line-height: 150%;
}

.onp-sl p {
  margin: 0!important;
}

.onp-sl-secrets .onp-sl-control {
  padding: 4px;
}

.onp-sl-secrets .onp-sl-control {
  padding: 4px;
  background: rgba(0, 0, 0, .05);
}

.onp-sl-social-buttons .onp-sl-control {
  min-width: 104px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  position: relative;
  margin: 10px 5px 0;
}

.onp-sl-social-buttons .onp-sl-flip .onp-sl-control-inner-wrap {
  perspective: 500px;
  perspective-origin: 50% 0;
  -webkit-perspective: 500px;
  -webkit-perspective-origin: 50% 0;
  -moz-perspective: 500px;
  -moz-perspective-origin: 50%...