JSFiddle - React, Tailwind, and code Playground

HTML

<script src="materialize"></script>
<footer class="page-footer yellow darken-4">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer Content</h5>
        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i>link1</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>link2</a>
          </li>
          <li>link3<a class="grey-text text-lighten-3" href="#!"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i></a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-vimeo fa-2x" aria-hidden="true"></i>link4</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="footer-copyright">
    <div class="container">
      © 2014 Copyright Text
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
</footer>

CSS

footer ul li{
  display: inline;
}