JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<footer class="page-footer">
	<div class="container">
		<div class="row">
			<div class="col s12 center">
				<ul class="footer-links white-text">
					<li><a href="/">Advertise</a></li>
					<li><a href="/">Contribute</a></li>
					<li>
            <a href="#!" data-activates="dropdown1">English
              <i class="material-icons">arrow_drop_down</i>
            </a>
          </li>
				</ul>
				<p>Disclaimer</p>
			</div>
		</div>
	</div>
	<div class="footer-copyright">
		<div class="container">© 2017 Copyright<a class="grey-text text-lighten-4 right" href="#!">More Links</a></div>
	</div>
</footer>

CSS

.page-footer {
  background-color: #0585cb;
  font-size: 13px;
  color: #7dadda;
}

.footer-links {
  display: inline-block;
}

.footer-links li {
  display: inline-block;
}

.footer-links li a{
    color: #f2f2f2;
    font-weight: bold;
    text-decoration: none;
}

.footer-links>li:before {
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
    content: "\00a0";
    border-left: 1px solid #047bbc;
    height: 8px;
    vertical-align: middle;
}

.footer-links>li:first-child:before {
    display: none;
}