JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<div class="topBox">
  <div class="navigationDrawerButton">
    <svg class='navButton' xmlns="http://www.w3.org/2000/svg" width="42" height="46" stroke="white">
      <path d="M4 32.8148C4 31.7102 4.89543 30.8148 6 30.8148H33C34.1046 30.8148 35 31.7102 35 32.8148V34C35 35.1046 34.1046 36 33 36H6C4.89543 36 4 35.1046 4 34V32.8148Z" fill="white" />
      <path d="M4 17.2593C4 16.1547 4.89543 15.2593 6 15.2593H33C34.1046 15.2593 35 16.1547 35 17.2593V18.4444C35 19.549 34.1046 20.4444 33 20.4444H6C4.89543 20.4444 4 19.549 4 18.4444V17.2593Z" fill="white" />
      <path d="M4 3C4 1.89543 4.89543 1 6 1H33C34.1046 1 35 1.89543 35 3V4.18518C35 5.28975 34.1046 6.18518 33 6.18518H6C4.89543 6.18518 4 5.28975 4 4.18518V3Z" fill="white" />
    </svg>
  </div>

  <h1 class="prompt">
    Select an area to search
  </h1>
</div>

CSS

.topBox {
  position: relative;
  padding: 10px 60px;
}

.navigationDrawerButton {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  fill: #FFFFFF;
  stroke: #FFFFFF;
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

.navButton {
  display: block;
}

.prompt {
  margin: 0;
  text-align: center;
}