JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn about"><a href="#">About</a></div>

CSS

.btn {
    position: relative;
    width: 136px;
    height: 47px;
    font-family: 'Charis Sil italic', sans-serif;
		margin: 0 auto;
		box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 
               0 0 10px rgba(0, 0, 0, 0.1) inset;
		transition: opacity 3s ease;
}
.btn:before,
.btn:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.btn:before {
    left:1px;
    bottom:21px;
    width:95%;
    height:35%;
    max-width:200px;
    box-shadow:0 20px 2px rgba(0, 0, 0, 0.4);
    transform:skewY(3deg);
    transform-origin:0 100%;
}
         
.btn:after {
    display:none;
}

.btn a {
    font-size: 20px;
    color: #303030;
    line-height: 2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.53); 
		text-decoration: none;
		padding: 2px 0 2px 35px;
}
.about {
    background-color: #74bdd8;
    border: 1px solid #63a5be;
    box-shadow: 0 0 0 1px rgba(99,165,190, 0.64) inset;
    border-left: none;
}