JSFiddle - React, Tailwind, and code Playground

by Bhupesh Kushwaha

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-right">
    <div class="social-links">
      <div class="social-row soc-row-1">
        <a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        <a href="#" class="github"><i class="fa fa-github" aria-hidden="true"></i></a>
        <a href="#" class="linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
      </div>
      <div class="social-row">
        <a href="#" class="stack-overflow"><i class="fa fa-stack-overflow" aria-hidden="true"></i></a>
        <a href="#" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        <a href="#" class="youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>

CSS

#footer .footer-right {
  float: right;
  margin-right: 30px;
  margin-top: 20px;
}

#footer .footer-right a {
  height: 55px;
  width: 55px;
  text-align: center;
  color: black;
  padding: 5px 5px;
  display: inline-block;
  font-size: 3em;
  margin-right: -4px;
}