JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<div class="footer">
  <div class="links">
  <div class="link-item">
  <h3>Social</h3>
    <ul>
      <li>
        <a href="#">Facebook</a>
      </li>
       <li>
        <a href="#">Twitter</a>
      </li>
       <li>
        <a href="#">Youtube</a>
      </li>
    </ul>
  </div>
  <div class="link-item">
  <h3>Support</h3>
    <ul>
      <li>
        <a href="#">Tel</a>
      </li>
       <li>
        <a href="mailto:[email protected]">Email</a>
      </li>
    </ul>
  </div>
  <div class="link-item">
  <h3>Extra</h3>
    <ul>
      <li>
        <a href="#">Our Chefs</a>
      </li>
    </ul>
  </div>
</div>

CSS

.footer {
  /* The dividing footer: */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: #efebe785;
  color: #000000;
  text-align: center;
  border: 1px solid #00000094;
}

ul {
  padding: 0;
}

ul li {
 list-style: none;
}

.links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.links li {
  margin-bottom: 10px;
}

.link-item {
    padding: 0;
    text-align: left;
}

.link-item a {
    color: #333;
    font-size: 16px;
    text-decoration: none;
}

.link-item a:hover {
  color: blue;
}