JSFiddle - React, Tailwind, and code Playground

by Alberto_Montiel

HTML

<link rel="stylesheet" 
href="https://use.typekit.net/vbg3aod.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="navbar">

    <div class="title-desktop">Activity Overview</div>
    
   
<span class="searchbar-container">
 
       <div class="searchbar-open-top">
          
      
      <span class="pill"><div class="pill-text">560 Oak Park Av</div><a href="#"><i class="material-icons">cancel</i></a></span>

<span class="pill"><div class="pill-text">12606 Forest Park Ave.</div><a href="#"><i class="material-icons">cancel</i></a></span>
     
<span class="pill"><div class="pill-text">12606 Forest Park</div><a href="#"><i class="material-icons">cancel</i></a></span> 
<span class="pill"><div class="pill-text">12606 Forest Park</div><a href="#"><i class="material-icons">cancel</i></a></span>
<input type="text" placeholder="Search more Agent(s) or Office(s)">


        </div>
   
        
     
        
        
        <div class="searchbar-open-bottom">
            <ul>
    <h4 class="result-title">Offices</h4>
    <li>
        <p>123 Main St<br><sub>Acme Realty, 145456786</sub></p>
    </li>
    <li>
        <p>123 Main St<br><sub>Acme Realty, 145456786</sub></p>
    </li>
</ul>
  <ul>
    <h4>Agents</h4>
    <li>
       <p>123 Main St<br><sub>Acme Realty, 145456786</sub></p>
    </li>
    <li>
        <p>123 Main St<br><sub>Acme Realty, 145456786</sub></p>
    </li>
</ul>
        </div>
 </span>
  <div class="title-mobile">Activity Overview</div>  
   <div>
   <a class="clear-button">CLEAR ALL</a>
   </div>
    <div class="date-picker">
  
        <i class="material-icons">today</i>
        <span>Sept 20 - 25</span> 
        <button>
            <i class="material-icons">arrow_drop_down</i>
        </button>
    </div> 
    
</div>

SCSS

input[type=text] {
  margin-top:5px;
  height:26px;
}

.clear-button {
  margin-top:16px;
  font-size:14px;
  color:#000570;
  position:absolute;
  margin-left:-90px;  
  font-weight:500;
}

 .searchbar-open-top {
    background:white;
    border-radius:4px 4px 0 0; 
    white-space: nowrap;
    margin:10px;
    padding:0 70px 6px 33px;      
    color:#737373;
    width:100%;
    display: flex;  
    flex-wrap: wrap;
    border-bottom: 1px solid #00000030;
    background-image: url(https://svgshare.com/i/drS.svg);
    background-repeat:no-repeat;
    background-position:5px 10px;
    box-shadow: 0 4px 8px 0px #00000050; 
   
   
  }
 .searchbar-container {
   width:100%;
   display: flex; 
   flex-wrap: wrap;
   box-shadow: 0 4px 8px 0px #00000050; 
   max-width:590px;
   align-items: end;
   
 }
.searchbar-open-bottom{

  background:white;
  border-radius:0 0 4px 4px; 
  margin:-10px 10px;
  padding:10px;  
  width:100%;
  box-shadow: 0 4px 8px 0px #00000050;  
}
input {
  font-size:16px;
  border:none;
  width:100%;
}
input:focus {
    outline: none;
}
h4 {
  color: #F6841D;
    font-family: roboto,sans-serif;
    font-weight: 300;
    margin-left:-32px;
}
sub {
    color: #8A8989;
     font-family: roboto,sans-serif;
    font-weight: 400;
}
ul {
  margin-top:-18px;
}
p {
  line-height: 11px;
  font-weight: 500;
  margin-left:-32px;
}
li {
   list-style-type: none;
}
body {
  font-family: roboto,sans-serif;
  font-style: normal;
}


@mixin navbar-items {
  background:white;
  height:20px;
  border-radius:4px;
  white-space: nowrap;
}
@mixin title {
  color:white;
  white-space: nowrap;
}
.title-desktop {
           @include title;
           display:block;
           margin:20px 14px;
          }
 .title-mobile {
  display:none;
  z-index:-1;
}
body {
  padding:10px;
  font-family: roboto, sans-serif;
  font-style: normal;
}
.pill{
  background-color:#CCCDE2;
  color:#000570;
  font-weight:500;
  border-radius:4px;
  font-size:14px;
  height:22px;
 ...