JSFiddle - React, Tailwind, and code Playground

by Marian Rick

HTML

<footer>
  <div id="footer">
    <div class="inner-wrap clearfix">
      <div class="section about">
        <p>what we stand for
          <a href="/about">learn more</a>
        </p>
        <h3>join us</h3>
        <p> to join check out<a href="/join"> join</a> here for more information</p>
      </div>
      <div class="section news">
        <ul>
          <li>
            <a href="#">news</a>
          </li>
          <li>
            <a herf="#">sports</a>
          </li>
        </ul>
      </div>
      <div class="section legal">
        <h3>legal stuff</h3>
        <ul>
          <li>
            <a href="#">privacy</a>
          </li>
          <li>
            <a href="#">terms of services</a>
          </li>
        </ul>
      </div>
    </div>
    <div id="bottom-footer">
      <div class="inner-wrap clearfix">
        <p class="fotter-quote">
          <em>
          <i class = "fa fa-quote-left"></i>just live your life<i class = "fa fa-quote-right"></i>
        </em>

        </p>
      </div>
      <p>
    </div>
</footer>

CSS

#footer {
  margin: 0px;
  padding: 0px;
  min-width: 100%;
  max-width: 100%;
  background: #2c3036;
  height: auto;
  width: 100%;
}

#bottom-footer {
  background: #16a085;
  margin: 0px;
  padding: 0px;
  min-width: 100%;
  max-width: 100%;
  height: auto;
}