JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
        <div class="contact">
            lorem ipsum
               <button></button>
        </div>
    </header>
</body>

CSS

* { 
    margin:0; padding:0; 
}
body { 
    background-image: url("http://gallery.photo.net/photo/8551440-md.jpg");
}
button { 
    background:none; border:none; 
}

header { 
    height:100px; 
    background-color: rgba(41, 52, 61, .8); 
    position:relative;
}

.contact { 
    float:right; 
    width:auto; 
    position:relative; 
    height:100%;
    right:20%;
}


button { 
  top: 100%;
  position: absolute;
  width: 90px;
    margin-top:-28px;
  height:56px;
    border-radius:0px 0px 14px 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(41, 52, 61, .8) 50%,rgba(41, 52, 61, .8) 100%); 
}

button:after{
    content:'login';
    position:absolute;
    left:10px;
    top:10px;
    width:70px;
    height:15px;
    padding:10px 0px;
    background:orange;
    border-radius:10px;
}