JSFiddle - React, Tailwind, and code Playground

by mckabue

HTML

<div class="wrapper">
<div class="header">

</div>
<div class="contents">
<div class="search">
<input placeholder="search" />
</div>
<div class="search-results">
<div class="loader">

</div>
</div>
</div>
</div>

SCSS

.wrapper{
  height:400px;
  width:200px;
  display:flex;
  flex-direction: column;
  
  .header{
    background: blue;
    height:50px;
    
    z-index: 1000;
  }
   .contents{
    background:red;
    height: calc(100% - 50px);
     display:flex;
  flex-direction: column;
    
    .search{
      z-index:1;
      height: 40px;
      background: yellow;
    }
    
    .search-results{
      height: calc(100% - 40px);
        display: table;
        background: pink;
        .loader{
      position:absolute;
      background: green;
      height: 100%;
                        width: 100%;
                        top: 0px;
                        bottom: 0px;
                        left: 0px;
                        right: 0px;
                        pointer-events: none;
                        display: table;
    }
    }
    }
  }