JSFiddle - React, Tailwind, and code Playground

by David McCormack

HTML

<footer>
        <div id="links-add">
            <a href="index.html">Home</a>               </div> 
     <div id="links-add">
            <a href="index.html">Home</a>               </div> 
     <div id="links-add">
            <a href="index.html">Home</a>               </div> 
     <div id="links-add">
            <a href="index.html">Home</a>               </div> 
                
    <div id="links-footer">
        
        
        <li><a href="#">FAQ</a></li>

      <li><a href="#">Privacy Policy</a>

        </li>
        <li><a href="#">Terms and Conditions</a>

        </li>
        <li><a href="#">legal</a>

        </li>
    </ul>
    	</div>		
                    
                    
		<div id ="connect">	
     <h3>Chat with us</h3>   
    <ul class="social">
     
       <li><a class="facebook" href="#"> </a>

        </li>
        
        <li><a class="twitter" href="#"><img src=""> </a>

        </li>
    </ul>
    </div>
        <p class="copy-right">Website by Thor<a href="#">copyright info</a> &nbsp; &copy 2015</a>

    </p>
               
    </footer>

CSS

.footer{
    margin-top: 200px;
    height:20%;
    width: 100%;
    background-color:#000000;

   
}
#connect, #links-add{
    display:inline-block; 
    height:20%;  
    vertical-align:top;
}
#links-add{
    width:20%;
}
#links-add p{
     margin-left:50px;
     color:#000000;
     text-align:left;
     display:inline-block;
     vertical-align:top;
     font-size:20px;
     font-family:'arial';
     margin-bottom:50px;
 }
#connect.social-icons h3{
     color:#000000;
     text-align:left;
     position:relative;
     display:inline-block;
     vertical-align:top;
     font-size:14px;
     font-family:'arial';
     margin-bottom: 20px;
}
#links-add .links-footer{
     
     clear: both;
     margin-left:50px;
     vertical-align:top; 
     display:inline;
 }
 
#links-add .links-footer li, .links-footer li a{
     display:inline-block;
     text-align:left;
	 margin-top:20px;
	 padding-right:40px;
     vertical-align:top;
	 color: #000000;
     font-size: 14px;
     
 }
.links-footer li a:hover {
     zoom: 1;
     filter: alpha(opacity=75);
     opacity: 0.7;
     -webkit-transition: opacity .15s ease-in-out;
     -moz-transition: opacity .15s ease-in-out;
     -ms-transition: opacity .15s ease-in-out;
     -o-transition: opacity .15s ease-in-out;
     transition: opacity .15s ease-in-out;
 }
 
#connect .social{
    max-width:15%; 
    vertical-align:bottom;
    display:inline; 
    white-space:nowrap; 
    position:relative;
}
#connect .social li {
     display:inline-block;
     width:40px;
 }
#connect .social li a {
     display:inline-block;
    margin-top:2px;
     width:34px;
     height:34px;
  }
  
  .copy-right {
     margin-top:20px;
     margin-left: 100px;
     margin-right: 100px;
     text-align:center;
     vertical-align: bottom;
 }
 .copy-right a {
     color: #000000;
     transition:0.3s all;
     -webkit-transition:0.3s all;
     -moz-transition:0.3s all;
     -o-transition:0.3s all;
 }
 .copy-right a:hover {
     color:#0000ff;
 }

...