JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="button1"></div>
<div class="button3 rounded"></div>
<div class="button2"></div>
</div>

CSS

html, body
{
 background-color: black;
}
.wrapper {
    position:relative;
}
.button1 {
    background:#ccc;
    width:150px;
    height:50px;
}
.button1:hover {
    background:#999;
    cursor:pointer;
}
.button2 {
    background:#ccc;
    width:150px;
    height:50px;
    margin-top:2px;
}
.button2:hover {
    background:#999;
    cursor:pointer;
}
.button3 {
    background:#ccc;
    border:2px solid #fff;
    height:60px;
    width:60px;
    position:absolute;
    top:20px;
    left:42px;
}
.button3:hover {
    background:#999;
    cursor:pointer;
}
.rounded {
    border-radius:35px;
}