JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<footer id="mh-footer" class="mh-footer-hover">
  <nav>
    <div class="row-1">
      <div class="mh-brand">
        <a href="#" class="mh-footer-primary">
          <span class="footer-logo">
            Spotify
          </span>
        </a>
      </div>

      <div class="mh-top-links">
        <dl class="mh-top-links__list">
          <dt>Empresa</dt>
          <dd>
            <a href="#">
              Acerca de
            </a>
          </dd>
          <dd>
            <a href="#">
              Empleo
            </a>
          </dd>
          <dd>
            <a href="#">
              For the Record
            </a>
          </dd>
        </dl>

        <dl class="mh-top-links__list">
          <dt>Comunidades</dt>
          <dd>
            <a href="#">
              Para artistas
            </a>
          </dd>
          <dd>
            <a href="#">
              Desarrolladores
            </a>
          </dd>
          <dd>
            <a href="#">
              Publicidad
            </a>
          </dd>
          <dd>
            <a href="#">
              Inversores
            </a>
          </dd>
          <dd>
            <a href="#">
              Proveedores
            </a>
          </dd>
        </dl>
        <dl class="mh-top-links__list">
          <dt>Enlaces &Uacute;tiles</dt>
          <dd>
            <a href="#">
              Ayuda
            </a>
          </dd>
          <dd>
            <a href="#">
              Reproductor web
            </a>
          </dd>
          <dd>
            <a href="#">
              App gratis para m&oacute;vil
            </a>
          </dd>
        </dl>
      </div>
      <ul class="mh-social-icons">
        <li>
          <a class="mh-social-icon" href="#" title="Instagram">
            <span>IG</span>
          </a>
        </li>
        <li>
          <a class="mh-social-icon" href="#" title="Twitter">
            <span>TW</span>
          </a>
        </li>
        <li>
          <a...

CSS

/* reset browser styles in one place */
body, dl, dt, dd, ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
}

.row-1 {
  background: pink;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.row-2 {
  background: coral;
}

.mh-brand {
  background: chartreuse;
  padding: 0 50px;
}

.mh-top-links {
  background: orange;
  width: 50%;
  display: flex;
}


.mh-top-links__list {
  margin-left: 5px;
  background: purple;
  width: 200px;
  flex-shrink: 0;
}

.mh-top-links__list:first-child {
  margin-left: 0;
}

.mh-social-icons {
  background: chocolate;
  display: flex;
  margin-left: auto;
}

.mh-social-icon {
  color: #fff;
  text-decoration: none;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  display: inline-block;
  margin: 5px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: grey;
}

.row-2 {
  display: flex;
}

.mh-legal-links {
  background: green;
  display: flex;
  align-items: flex-start;
}

.mh-legal-links > li {
  margin: 5px;
  background: blanchedalmond;
}

.mh-country-copyright {
  margin-left: auto;
  background: moccasin;
}