JSFiddle - React, Tailwind, and code Playground

by chicagogrooves

HTML

<!-- Build a header which has a search input bar in the center and three tabs aligned to the right side of the header (the number of tabs can vary)

The search bar and tabs should collapse into a veritcal list for widths less than 450px

The header should be sticky even if the page is scrolled
-->

<div class="header">
  <div class="search">
    <input type="text" placeholder="Enter search"/>
    <input type="submit" value="Search"/>
  </div>
  
  <div class="tabs">
    <div class="tab">
    Tab 1
    </div>
    <div class="tab">
    Tab 2
    </div>
    <div class="tab">
    Tab 3
    </div>
  </div>
</div>

CSS

.tab {
  border: 1px solid black;
  margin: 1px;
}

.header {
  display: flex;
  border: 1px solid blue;
  justify-content: flex-end;
}

.search { 
  justify-self: center;
}

.tabs {
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
}