JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="leftdoor_inner"></div>
    <div id="leftdoor_outer"></div>
    <div id="rightdoor_inner"></div>
    <div id="rightdoor_outer"></div>
    <a class="open_close_doors" href="#">click me</a>
    </div>

CSS

*{
margin:0;
padding:0;
}
body {
text-align: center;
position:absolute;
width: 100%;
}
img{
border: none;
}
#wrapper {
width: 748px !important;
height: 426px;
background-color: #9b9b9b;
margin: auto;
}
#leftdoor_inner{
background-color: #f000d7;
width: 122px;
height: 244px;
opacity: 0.75;
margin: auto;
top: 76px;
left: -61px;
position: relative;
z-index: 2;
}
#leftdoor_outer{
background-color: #ffea00;
width: 122px;
height: 244px;
opacity: 0.75;
margin: auto;
top: -168px;
left: -151px;
position: relative;
z-index: 1;
}
#rightdoor_inner{
background-color: #f000d7;
width: 122px;
height: 244px;
opacity: 0.75;
margin: auto;
top: -412px;
left: 61px;
position: relative;
z-index: 2;
}
#rightdoor_outer{
background-color: #ffea00;
width: 122px;
height: 244px;
opacity: 0.75;
margin: auto;
top: -656px;
left: 151px;
position: relative;
z-index: 1;
}
.open_close_doors{
position: absolute;
margin: auto;
top: 0px;
z-index: 4;
}

JavaScript

$(".open_close_doors").click(function(){
  $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");
  $("#rightdoor_inner").animate({"left": "+=50px"}, "slow");
});