JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuleft">
  <ul>
    <li id="text">
      <a href="#">Eficácia</a>
    </li>
    <li id="whitebar">
    </li>
    <li id="text">
      <a href="#">Rapidez</a>
    </li>
    <li id="whitebar">
    </li>
    <li id="text">
      <a href="#">Impacto <br> na vida real</a>
    </li>
    <li id="whitebar">
    </li>
    <li id="text">
      <a href="#">Tecnologia <br> avançada</a>
    </li>
    <li id="whitebar">
    </li>
    <li id="text">
      <a href="#">Segurança</a>
    </li>
  </ul>
</div>
<div class="image">
  <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" />
</div>

CSS

body {
  text-decoration: none;
  margin: 0 auto;
  max-width: 100% !important;
  height: auto;
}

.fundo img {
  max-width: 100% !important;
  height: auto;
}

.menuleft {
  background-color: #CDD0D2;
  list-style-type: none;
  /*position: absolute;*/
  width: 9%;
  height: 100%;
  /*display: table;*/
  float: left;
}

.menuleft ul {
  /*display: table-cell;*/
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  vertical-align: middle;
}

#text {
  -webkit-box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
  box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
  width: 100%;
  height: 17%;
  color: white;
  text-align: center;
  text-decoration: none;
  background-color: #F06D22;
}

.menuleft li a {
  font-family: Futura LT, 'Trebuchet MS', Arial;
  letter-spacing: 0.28vw;
  color: #fff;
  text-decoration: none;
  /*height: 100%;*/
  text-align: center;
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  width: 100%;
  writing-mode: tb-rl;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  white-space: nowrap;
}

.menuleft li:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.2);
}

.menuleft li a:hover {
  text-decoration: none;
  color: #fff;
}

#whitebar {
  text-decoration: none;
  display: table;
  width: 100%;
  height: 3px;
  background-color: #fff;
  writing-mode: tb-rl;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(180deg);
  white-space: nowrap;
  bottom: 0;
  margin: 0 auto;
}

.image {
  width: 91%;
  height: 100%;
  float: right;
}

.image img {
  width: 100%;
  height: 100%;
}