JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="column">
  <div id="title"> </div>
  <div id="menu">
    <div id="link">Hello!</div>
  </div>
   <div id="submenu"></div>
</div>
  <div id="categoryhold">
    <div id="categoryone">
      <!-- Column 1 -->
      <h3>01. Heading 1</h3>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
</body>

CSS

#column {
  width: 157px;
  height: 200px;
}
#title {
  height: 20px;
  background: blue;
}
#menu {
  height: 180px;
  background: red;
}


#categoryhold {
  width: 800px;
  height: auto;
  margin: 0 auto;
  margin-top: 10px;
  overflow: hidden;
}

#categoryhold div#categoryone {
  float: left;
  width: 157px;
  height: auto;
  margin: 10px;
  padding: 10px;
  background: #222;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
}

#categoryhold div#categoryone {
  border-left: 2px solid #ffdd00;
}

#categoryhold div#categorytwo {
  border-left: 2px solid #00aaff;
}

#categoryhold div#categorythree {
  border-left: 2px solid #ff00aa;
}

#categoryhold div#categoryfour {
  border-left: 2px solid #00ff55;
}

#categoryhold h3 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 10px;
}

#categoryhold ul li {
  padding-bottom: 10px;
  color: #ccc;
  padding-left: 15px;
  background: url(../images/li_arrow.png) no-repeat top left;
}

#categoryhold ul li:last-child {
  padding-bottom: 0px;
}

#categoryhold ul li a {
  font-weight: bold;
  color: #a1a1a1;
  ;
  text-decoration: none;
}

#categoryhold ul li a:hover {
  color: #fff;
  border-bottom: 1px dotted #fff
}