JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="inline-block">
    <h4>Website</h4>
    <ul>
      <li>
        <a href=''>Basic</a>
      </li>
      <li>
        <a href=''>Premium</a>
      </li>
      <li>
        <a href=''>Without Hosting</a>
      </li>
      <li>
        <a href=''>Without Database</a>
      </li>
      <li>
        <a href=''>Multiple Website's</a>
      </li>
    </ul>
  </div>
  <div class="inline-block">
    <h4>Hosting</h4>
    <ul>
      <li>
        <a href=''>Hosting</a>
      </li>
      <li>
        <a href=''>Host a personal site</a>
      </li>
      <li>
        <a href=''>Host an existing website</a>
      </li>
    </ul>
  </div>
  <div class="inline-block">
    <h4>Hosting</h4>
    <ul>
      <li>
        <a href=''>Hosting</a>
      </li>
      <li>
        <a href=''>Host a personal site</a>
      </li>
      <li>
        <a href=''>Host an existing website</a>
      </li>
    </ul>
  </div>
</div>

CSS

div.container > nav > ul > li > div {
  width: 100%;
  margin-top: 13px;
  padding: 25px;
  position: absolute;
  border-bottom: 1px #222222 solid;
  background-color: #ffffff;
}

div.container > nav > ul > li > div > ul {
  width: 200px;
  border-left: 2px #555555 solid;
}

div.container > nav > ul > li > div > ul > li {
  padding: 3px;
}

div.container > nav > ul > li > div > h4 {
  width: 242px;
  color: #d60000;
}

div.container > nav > ul > li > div > ul > li > a {
  text-decoration: none;
  color: #222222;
  font-size: 12px;
}

div.container > nav > ul > li > div > ul > li > a:hover {
  color: #d60000;
}

.inline-block {
  vertical-align: top;
  display: inline-block
}