JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class="door left"></div>
<div class="door right">
    <div class="lock"><br><br><br>open</div>
</div>

CSS

html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}
.door {
    background:green;
    height:100%;
    width:50%;
    float:left;
    position:relative;
    transition:all 3s;
    cursor:pointer;
}
.lock {
    background:red;
    width:150px;
    height:150px;
    border-radius:75px;
    position:absolute;
    top:35%;
    left:-75px;
    text-align:center;
}
.door.left {
    left:0;
}
.door.right {
    right:0;
}
.door.left.open {
    left:-50%;
}
.door.right.open {
    right:-50%;
}

JavaScript

function addClass(o, c){
   var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
   if (re.test(o.className)) return
   o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}
var doors = document.getElementsByClassName('door');
document.getElementsByClassName('lock')[0].onclick = function() {
    addClass(doors[0],'open')
    addClass(doors[1],'open')
}