JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<footer class="site-footer">
 
                    
   <div class="row-2">
       <div class="logofooter">
                       <a class="logofooter" href="index.html"> <img src="http://lorempixel.com/output/abstract-q-c-100-100-1.jpg"></a>
                       <div class="logocopyright">
                           <a href="index.html"> Copyright info</a>
                       </div>
              </div>
       <div class="legal">
                     <ul class="legal">
                         <li><a href="legal.html">Legal Policy</a></li>
                         <li><a href="contact.html">Contact</a></li>
                         <li><a href="privacy.html">Privacy</a></li>
                        <li><a href="disclaimer.html">Disclaimer</a></li>
                    </ul>
       </div>
                <div class="social">    
                    
                    <ul class="smm">
                        <li><a class="facebook" href="https://www.facebook.com"> <img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"></a></li>
                        <li><a class="twitter" href="https://www.twitter.com"><img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"> </a></li>
                        <li><a class="instagram" href="https://www.instagram.com"><img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"> </a></li>
                    </ul>
                </div>
   </div>
               
               
</footer>
</body>

</html>

CSS

.site-footer, .page-wrap:after {
  height: 250px; 
   
}
.site-footer {
  background: #919191;
    
}



.logofooter{
    float:left;
    padding-top:10px;
   
}
.logocopyright a {
    font-size: 10px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.row-2 ul li a {
    font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    text-decoration:none;
    color:#fff ;
    padding: 5px 15px;
    font-size: 16px;
   
}

.row-2 p {
    color:#fff;
    font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    font-size: 16px;
}

.row-2 a {
    font-size: 22px;
}
.row-2{
    padding-top: 100px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;    
}


.legal{

    float:left;
    margin-right:auto;
    margin-left:-60px;
}

.legal a:hover {
    color: #FFF;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    background: #1874CD;  
}
.legal li {
    display:inline-block;
    text-align: center;
    margin-left:20px;
}
.social{
    float:right;
    margin-top:-50px;
    margin-left:auto;
    
    
}

.social li, h3{
  
    font-size:10px;
    display:inline-block;
    text-align: center;
    color:#fff;
}

.smm li{
   
   
    margin-right:20px;
   
}
.facebook img
{
     width:20px;
    height:20px;
 border-radius: 50%;  
    margin-left:90px;
}
.twitter img
{
    width:20px;
    height:20px;
 border-radius: 50%; 
    margin-left:-30px;
}

.instagram img
{
    margin-left:-40px;
     width:20px;
    height:20px;
    border-radius: 50%;
}