JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Reference: http://stackoverflow.com/questions/16058823/how-to-make-div-center-horizontally-with-fixed-position -->

<div id="footer-container">
  <footer>hello world hello world hello world hello world hello world hello world hello world hello world</footer> <!-- Lots of text to show that the text wraps at smaller widths. -->
<div>

CSS

body {
  margin: 0; /* Disables jsfiddle's margins. */
}

#footer-container {
  bottom: 20px;
  position: fixed;

  display: flex;
  justify-content: center;
  width: 100%;
}

footer {
  width: 500px;

  border: 1px solid blue; /* To illustrate the width of the footer box. */
  background-color: pink; /* Not red because easier on the eyes. */
}