JSFiddle - React, Tailwind, and code Playground

HTML

<script src="materialize"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<style>
/* Inline List */
.inline li{
display: inline;
list-style-type: none;
}
</style>

<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 class="inline">
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i>1</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>2</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i>3</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-vimeo fa-2x" aria-hidden="true"></i>4</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>
 ExecutarCopiar para uma nova resposta