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">
            <i class="material-icons">search</i>
            <input type="text">
            <i class="material-icons">cancel</i>
        </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="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>
    

<div class="title-mobile">Activity Overview</div>

SCSS

.searchbar-open-top {
    background:white;
    border-radius:4px 4px 0 0; 
    white-space: nowrap;
    margin:10px;
    padding:10px;       
    color:#737373;
    width:100%;
    display: flex;     
    border-bottom: 1px solid #00000030;
  }
 .searchbar-container {
   width:100%;
   display: flex; 
   flex-wrap: wrap;
   box-shadow: 0 4px 8px 0px #00000050;  
   
 }
.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;
}
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;
  padding:6px;
  margin-right:10px;
  margin-top:-7px;
  display: flex;
i  {
    font-size:20px;
    vertical-align: text-bottom;
    letter-spacing: -7px;
  }
  }
.second:first-child{
  display:none;
}
 .searchbar-collapsed{
           display: flex;
           @include navbar-items;
           margin:10px;
           padding:10px;
           color:#737373;
           max-width:590px;
           width:100%;
  }
  
    .navbar {
       background:#000570;
   ...