JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background-color:#34495e;display:flex; justify-content:center;">
  <div class="flx-search">
     <a class="flx-search-item">Search Our Catalog</a>
     <a class="flx-search-item">View Patron Record</a>
     <a class="flx-search-item">Register for Programs</a>  
  </div>
</div>

CSS

.flx-search {
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  align-items:center;
  
  
  width:1060px;
  color:#ffffff;
}

    .flx-search-item {
         display: flex;            /* new */
         align-items: center;      /* new */
         justify-content: center;  /* new */

         flex-grow:1;
         text-align:center;
         /* display:block; <-- remove this */
         flex: 0 0 350px;
         height: 50px;
      }