JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="nav">
  <div class="nav-search"></div>
</div>
<div class="search">
  <div class="search-box">
    <input type="text" class="search-box-input" placeholder="Enter what you need to know more about...">
    <button class="search-box-button"></button>
  </div>
  <div class="search-results">
    <div class="search-results-result">
      <div class="search-results-result-title">Changing text color</div>
      <div class="search-results-result-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati ratione officiis repellat mollitia, veniam vitae error tempore nisi nostrum incidunt impedit reiciendis, quo consequatur odit modi in enim perferendis voluptatibus suscipit cumque iste numquam neque!</div>
    </div>
  </div>
</div>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  background: white;
  margin: 0;
}
.nav {
  background: #EBEFF0;
  height: 56px;
  display: flex;
  align-items: stretch;
}
.nav-search {
  background: #233340;
  flex-basis: 56px;
}
.search {
  background: #233340;
}
.search-box {
  display: flex;
  padding: 20px;
}
.search-box-input {
  background: rgba(0,0,0,0.4);
  border: none;
  outline: none;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 10px 15px;
  flex-grow: 1;
}
.search-box-button {
  flex-basis: 42px;
  flex-grow: 0;
  flex-shrink: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: none;
  outline: none;
  background: #28ADB4;
  cursor: pointer;
  position: relative;
}
.search-box-button::before {
  display: block;
  content: " ";
  width: 30%;
  height: 30%;
  border: 2px solid white;
  border-radius: 999px;
  position: absolute;
  top: 44%;
  left: 56%;
  transform: translate(-50%, -50%);
}
.search-box-button::after {
  display: block;
  content: " ";
  width: 21.21%;
  height: 2px;
  background: white;
  position: absolute;
  top: 62%;
  left: 38%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.search-results {
  background: #3D5569;
}
.search-results-result {
  padding: 20px;
  font-family: "Open Sans", sans-serif;
}