JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="body">
        <li >
            <a>switch #1</a>
        </li>
		<li class="active">
            <a>switch #2</a>
        </li>
	</ul>

CSS

.body{
width: 200px;
height: 200px;
margin: 50px;
background-color: #34495e;
padding: 0;
overflow: hidden;
border-radius: 10px;
}
.body li{
display: block;
width: 95%;
margin: 4px auto;
height: 96px;
background-color: #1abc9c;
    cursor : pointer;
    		-webkit-transition: all .4s;
		-moz-transition: all .4s;
		-ms-transition: all .4s;
		-o-transition: all .4s;
		transition: all .4s;
    text-align:center;
}
.body li:first-child{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-bottom:0px;
}
.body li:last-child{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: 0px;
}
.body li:first-child.active{
     box-shadow: inset 0px -6px 40px -13px black;
    border-bottom: 1px solid #19A388;
}
.body li:last-child.active{
     box-shadow: inset 0px 6px 40px -13px black;
    border-top: 1px solid #19A388;
}
a{
 color : #34495e;
    text-decoration:none;
    line-height: 5;
    font-size : 20px;
    font-weight: bold;
}

JavaScript

$("li").click(function(){
    $(".body li").removeClass("active");
    $(this).addClass("active");
});