JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<link rel="stylesheet" href="http://blu-rays.pk/web/css/blueHighCondensedFontKit.css">
<p>QUALITY AND CONVENIENCE</p>
<div id="footer_about_content">
  <div class="footer_row_0"><img src="http://i.imgur.com/lG4VdOU.png"></div>
  <div class="customFooter">
    <div class="customFooterColumns">
      <div class="customFooterColumn contactsColumn">
        <h3>SIGN UP FOR OUR NEWSLETTER</h3>
        <section class="subscribe">
          <form class="form-wrapper cf" method="post">
            <input class="tiptipNewsletterInfo" id="emailInputText" name="email" placeholder="Enter your email here..." title="Get updates of all new Blu-ray releases through our weekly Newsletter. Highly recommended for Blu-ray enthusiasts!" />
            <button class="showforDesktopsOnly" id="submitBtnForDesktop" type="submit">Subscribe</button>
          </form>
        </section>
      </div>
      <div class="split">
        <img src="http://i.imgur.com/8AM944Z.png">
      </div>
      <div class="customFooterColumn storeFeaturesColumn">
        <h3>CONTACT US FOR EXPERT ADVICE</h3>
        <span class="call_us_or">Call Us:</span>
        <span class="phone_number">0320-BLURAYS</span>
        <span class="call_us_or">or</span>
        <span class="email_us"><a href="#">Email Us</a></span>
        
        
      </div>
      <div class="split">
        <img src="http://i.imgur.com/8AM944Z.png">
      </div>
      <div class="customFooterColumn socialColumn">
        <h3>BLU-RAYS.PK AND SOCIAL MEDIA</h3>
        <div class="social_icons">
          <a class="social_icon facebook" href="#">Facebook</a>
          <a class="social_icon twitter" href="#">Twitter</a>
          <a class="social_icon google_plus" href="#">Google+</a>
          <a class="social_icon share_this" href="#">Share This</a>
        </div>
      </div>
    </div>
  </div>
  <div class="footer_row_2">
    <div class="customFooterMessages">
      <table>
      <tr>
        <td><a class="footer_icon visa"...

CSS

p { 
	font-family: BlueHighwayCondensed-Regular;
	font-weight: normal;
	font-style: normal;
  font-size: 40px;
}

.subscribe {
height: 28px;
  width: 255px;
  margin: 0px auto 0px auto;
  padding-left: 20px;
  padding-top: 3px;
  
}

.form-wrapper {
max-width: 270px;
margin: auto;
}

.cf {
zoom: 1;
}

.form-wrapper #emailInputText {
max-width: 145px;
width: 100%;
height: 22px;
float: left;
font: 10px 'lucida sans', 'trebuchet MS', Tahoma;
border:1px solid #414d7d;
background-color: #30395c;
margin: 0px 5px 0px 0px;
-moz-box-shadow:    inset 0 0 10px #252c47;
-webkit-box-shadow: inset 0 0 10px #252c47;
box-shadow:         inset 0 0 10px #252c47;
text-align:center;
  color: #a4afcb;
}

.form-wrapper #emailInputText::-webkit-input-placeholder {
    color:    #a4afcb;
}
.form-wrapper #emailInputText:-moz-placeholder {
    color:    #a4afcb;
}
.form-wrapper #emailInputText::-moz-placeholder {
    color:    #a4afcb;
}
.form-wrapper #emailInputText:-ms-input-placeholder {
    color:    #a4afcb;
}

.form-wrapper #submitBtnForDesktop {
overflow: visible;
position: relative;
float: left;
border: 0;
padding: 0;
cursor: pointer;
height: 28px;
width: 88px;
text-indent:-9999px;
background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
}

.form-wrapper #submitBtnForDesktop:hover {
background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 -28px transparent;
}

#footer_about_content {
margin: 0 auto;
max-width: 980px;
}

.customFooter {
color: #939598;
float: left;
width: 100%;
  background-color: #252c44;
}

.customFooter .customFooterColumns {
  float: left;
  max-width: 980px;
  width: 100%;
  padding-top: 30px;
}

.customFooterColumns .customFooterColumn {
float: left;
text-align: center;
padding: 15px 5px 10px;
width: 33.26%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.customFooterColumns .split {
  width: 1px;
  height:69px;
  float: left;
  padding-top:13px;
}

.customFooterColumns .contactsColumn...