JSFiddle - React, Tailwind, and code Playground

by Santharam N R

HTML

<footer>
     <div class="footer">
        <nav class="footer-nav">
           <ul class="list-1">
              <li><img src="img/notes.png" alt="" /></li>
              <li>ARTICLES</li>
              <li>COLUMNS</li>
              <li>BLOG</li>
              <li>TOPICS</li>
           </ul>
           <ul class="list-2">
              <li>ABOUT</li>
              <li>AUTHORS</li>
              <li>MASTHEAD</li>
              <li>CONTRUBUTE</li>
              <li>STYLE GUIDE</li>
              <li>CONTACT</li>
              <li>SPONSORSHIPS</li>
           </ul>
        </nav>
        <hr >
        <div class="row">
           <div class="col-md-6">
              <img class="col-md-6-pgf" src="img/footer1.png" /> 
              <h3 class="footer-title">.NET Training</h3>
              <p class="footer-pgf">Less of boring theory! Hands on programming isour training methidology! You'll love it.</p>
              <a class="footer-link-1" href="#">learn more ></a> 
           </div>
           <div class="col-md-6">
              <img class="col-md-6-pgf" src="img/footer2.png" /> 
              <h3 class="footer-title">Shopify Expert at $20/hour</h3>
              <p class="footer-pgf">Unique custom made shopify theme and tweaks. Strat selling online with stunning eCommerce storefronts created using the shopify CMS</p>
              <a class="footer-link-2" href="#">learn more ></a>                
           </div>
        </div>
        <hr >
        <div >
           <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
        </div>
     </div>
  </footer>

CSS

.footer-pgf{
    font-size:11px; 
    width: 86%;
}
.footer-title{
    font-size:13px;
    font-weight: 600;
    margin-top: -1px;
}
.footer{
    clear:both;
    background:url('../img/footer-bg.jpg');
    overflow: hidden;
}

.footer-nav .list-1 {
    font-size:13px;
    font-weight:600;
    text-align: center; 
}
.footer-nav .list-2 {
    font-size:12px;
    font-weight:600;
    text-align: center; 
}
.footer-nav ul li{
    display:inline;
    padding:8px;
}
.footer-link{

padding-top:10px;   

}

.col-md-6{
    float:left;
    
}