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 id="open_doors" href="#"></a>
    <a id="close_doors" href="#"></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_doors{
position: absolute;
margin: auto;
top: 0px;
z-index: 5;
width: 50px;
height: 50px;
background-color: #cccccc;
}

#close_doors{
position: absolute;
margin: auto;
top: 0px;
z-index: 4;
width: 50px;
height: 50px;
background-color: #cccccc;
}

a#open_doors:before {
content: "open doors";
}

a#close_doors:before {
content: "close doors";
}

JavaScript

$(document).ready(function(){
  $("#open_doors").click(function(){
  $("#leftdoor_inner").animate({"left": "-=164px"}, 'slow');
  $("#leftdoor_outer").animate({"left": "-=74px"},'slow');
  $("#rightdoor_inner").animate({"left": "+=164px"},'slow');
  $("#rightdoor_outer").animate({"left": "+=74px"},'slow');
  $("#open_doors").hide();
  $("#close_doors").show();
  });
  $("#close_doors").click(function(){
  $("#leftdoor_inner").animate({"left": "+=164px"},'slow');
  $("#leftdoor_outer").animate({"left": "+=74px"},'slow');
  $("#rightdoor_inner").animate({"left": "-=164px"},'slow');
  $("#rightdoor_outer").animate({"left": "-=74px"},'slow');
  $("#close_doors").hide();
  $("#open_doors").show();
});
});