JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "skills">
    <h2 id="Skills"> Skills </h2>
    <ul>
      <li>HTML<div class="rating">●●●●●</div></li>
      <li>CSS<div class="rating">●●●●●</div></li>
      <li>Javascript<div class="rating">●●●●●</div></li>
      <li>Python<div class="rating">●●●●●</div></li>
      <li>Java<div class="rating">●●●○○</div></li>
      <li>MySQL<div class="rating">●●●○○</div></li>
      <li>ARM Assembly<div class="rating">●●●○○</div></li>
      <li>Ada<div class="rating">●●●○○</div></li>
    </ul>
    <ul>
        <li>MS Office<div class="rating">●●●●●</div></li>
        <li>Git<div class="rating">●●●●●</div></li>
        <li>Windows<div class="rating">●●●●●</div></li>
        <li>Command Line<div class="rating">●●●●●</div></li>
        <li>Mac<div class="rating">●●●●○</div></li>
        <li>Adobe Photoshop<div class="rating">●●●●○</div></li>
        <li>Beatboxing<div class="rating">●●●●○</div></li>
        <li>Minecraft<div class="rating">●●●●○</div></li>

    </ul>

    <ul>
        <li>Data Analytics<div class="rating">●●●●○</div></li>
        <li>Public Speaking<div class="rating">●●●●○</div></li>
        <li>Agile<nobr><div class="rating">●●●●○</div></li>
        <li>Leadership<div class="rating">●●●●○</div></li>
        <li>Communication<div class="rating">●●●●○</div></li>
        <li>Scrum<div class="rating">●●●●○</div></li>
        <li>Project Management<div class="rating">●●●●○</div></li>
    </ul>
  </div>
  
  <div class="contact">
  <h2> <a id="contactMe"></a> Stalk me here </h2>
  <ul class = 'socialMediaLinks'>
      <li id= "linkedin"><a href="https://www.linkedin.com/in/septianrazi/"><img src= "images/linkedin.png"></a></li>
      <li id= "github"><a href="https://www.github.com/septianrazi/"><img src= "images/github.png"></a></li>
      <li id= "email"><a href="mailto:[email protected]?subject=Found%20your%20Website!%20"><img src= "images/email.png"></a></li>
      <li id= "instagram"><a href="https://www.instagram.com/septianrazi/"><img src=...

CSS

.skills ul {
  columns: 3;
  text-align: center;
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 5%;
}

.skills ul li {
  padding-top: 5px;
  font-size:  1.0em;
  overflow: hidden;
  white-space: nowrap;
}

.rating {
  font-family: sans-serif;
  font-size: 2em;
  color: darkslategray;
}


/* ----------- */

/* -------------------- */
/* SOCIAL MEDIA SECTION */
/* -------------------- */

.contact ul{
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: no-wrap;

  /* text-align: center; */
}

.contact li {
  text-align: center;
  /* padding: 14px 16px; */
  text-decoration: none;
  display: inline;
  margin-left: 10%;
  margin-right: 10%;


}

nav a {
  color: white;
  text-decoration: none;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.socialMediaLinks img {
  width: 200%;
}