JSFiddle - React, Tailwind, and code Playground

by Home Blogger

HTML

<div id='home-blogger-subbox'>
            <div class='popup-box'>
   <div class='exit-button-subbox'></div>
            <div class='tagline'>
            أشترك معنا بالنشرة البريدية 
            </div>
                 <p>

للحصول على أحدث المشاركات مباشرة إلى علبة الوارد الخاصة بك مجانا

</p>
<p>
!فقط أدخل عنوان البريد الإلكتروني الخاص بك
</p>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/lxWRa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' class='email-bg' name='email' placeholder='...أدخل عنوان بريدك الإلكتروني ' />
            <input type="hidden" value="blogspot/lxWRa" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="انقر هنا للإشتراك" class="button" type="submit" />
            </form>
            </div>
   </div>
   </div>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('feedburner_popup_box') != 'yes'){
$('#home-blogger-subbox').delay(25000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('#home-blogger-subbox').stop().fadeOut('medium');
});
}
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 15 });
});
</script>

CSS

<link href='https://googledrive.com/host/0BxFbqjck0GDdRlY3RjhpNTFNajQ' rel='stylesheet'/>
<link href='https://googledrive.com/host/0BxFbqjck0GDdMDJleFhXY0k5Slk' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
/*----- Email Subscription Popup Box Coded by www.homeblog7.blogspot.com -----*/
#home-blogger-subbox {
  display: none;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height:100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:99999999;
}
#home-blogger-subbox .popup-box {
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border-radius: 1px;
  border: 2px solid #F5F500;
  background: #3A3939 url('http://cdn.top4top.co/i_159af0613f1.png');
  background-repeat: no-repeat;
  background-position: 100% 45%;
  position:relative;
  top:25%;
  z-index:0;
}
#home-blogger-subbox .popup-box .exit-button-subbox {
  float: right;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: 2px;
  margin-right: -2px;
}
#home-blogger-subbox .popup-box .exit-button-subbox:before {
  content: "X";
  padding: 5px 8px;
  background: #FFFFFF;
  color: #000000;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0px -1px #000;
  font-family: sans-serif;
  border: 4px solid #F5F500;
  border-radius: 50px 0px 50px 50px;
}
/*--Main Headline Style - www.homeblog7.blogspot.com--*/
#home-blogger-subbox .popup-box .tagline {
  padding: 0;
  line-height: 2em;
  font-size: 26px;
  height: 50px;
  font-weight: normal;
  font-family: ge_ss_threeregular,Droid Sans;"Oswald",sans-serif;
  text-shadow: 0px -1px 0px #F5F500;
  color: #3A3939;
  text-align: center;
  background: #FFFF00;
  border-right: 7px solid #F5F500;
  border-left: 7px solid #F5F500;
  border-bottom: 15px solid #3A3939;
}
/*--Paragraph Style - www.homeblog7.blogspot.com--*/
#home-blogger-subbox .popup-box p {
  font-family: ge_ss_threeregular,Droid...