JSFiddle - React, Tailwind, and code Playground

HTML

<section role="searchform"><div class="body-searchform">       
<div class="buttons-search">
            <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a>
            <a href="#" class="search-buttons" ><img src="/img/btn_placeholder.svg"></a>
            <a href="#" class="search-buttons" ><img src="/img/btn_placeholder.svg"></a>
            <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a>
            <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a>
</div>
                </div></section>

CSS

section[role="searchform"] {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-top: 57px;
    width: 100%;
    font-family: 'Open Sans', sans-serif; }
     section[role="searchform"] .body-searchform {
      width: 100%;
      text-align: center;
      color: #fff; }
       section[role="searchform"] .body-searchform .buttons-search {
        height: 84px;
        position: relative; }
         section[role="searchform"] .body-searchform .buttons-search:after {
          content: " ";
          height: inherit;
          background-color: rgba(100, 141, 12, 0.6); }
         section[role="searchform"] .body-searchform .buttons-search:after {
          margin-left: 5px; }
         section[role="searchform"] .body-searchform .buttons-search .search-buttons {
          line-height: 84px;
          margin: 0;
          background-color: #648D0C;
          width: 100px;
          height: 100%;
          display: inline-block; }
           section[role="searchform"] .body-searchform .buttons-search .search-buttons img {
            vertical-align: middle; }