JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<header>
    <div class="logo"><div class="mask"></div></div>
    <div class="search"><div class="mask"></div></div>
</header>

SCSS

header {
    position: relative;
    height: 60px;
    background: #000;
    overflow: hidden;
    
    .logo, .search {
        position: relative;
        background: lightblue;
        height: 200%;
        width: 100px;                
    }
    .search {
        position: absolute;
        right:0; top:0;   
    }

    .mask {
        position: absolute;
        top: -100%;
        height: 200%;
        width: 60px;
        background: #000;
        -webkit-transform: rotate(-45deg);
        -webkit-transition: all 300ms ease-out;
    }

    .logo {
        .mask {          
            right: -13px; 
        }
    }
    .search {
        .mask { 
            left: -70px; 
        }
    }
 
   &:hover {
        .mask {
            -webkit-transform: rotate(45deg) translate(40px,0);
        }
   }
}