JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxes"><input type="radio" name="boxes" class="trigger" id="close" checked><label class="close" for="close"></label><input type="radio" name="boxes" class="trigger" id="content1"><label class="content" for="content1">
    <div class="wrapper">
      <h1>1</h1>
      <div>text1</div>
    </div>
</label><input type="radio" name="boxes" class="trigger" id="content2"><label class="content" for="content2">
    <div class="wrapper">
      <h1>2</h1>
      <div>text2</div>
    </div>
</label><input type="radio" name="boxes" class="trigger" id="content3"><label class="content" for="content3">
    <div class="wrapper">
      <h1>3</h1>
      <div>text3</div>
    </div>
</label><input type="radio" name="boxes" class="trigger" id="content4"><label class="content" for="content4">
    <div class="wrapper">
      <h1>4</h1>
      <div>text4</div>
    </div>
</label></div>

CSS

body{
  margin:0;
  padding:0;
  overflow-x:auto;
  overflow-y:scroll;
  background:#000;
}
.boxes{
  position:relative;
}
.content{
  position:relative;
  display:inline-block;
  width:50%;
  height:50vh;
  color:#fff;
  cursor:pointer;
  background:#555;
  overflow:hidden;
  vertical-align:top;
  transition: .6s .6s;
}
.content .wrapper{
  position:relative;
  box-sizing:border-box;
  width:100%;
  height:100%;
}
.content .wrapper h1{
  position:absolute;
  margin:0;
  width:100%;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  transition: .6s .6s;
}
.content .wrapper div{
  position:relative;
  top:100%;
  text-align:left;
  overflow:hidden;
  transition: .6s;
}
.trigger{
  margin:0;
  padding:0;
  width:0;
  height:0;
  border:0;
  position:absolute;
  opacity:0;
}
.close{
  position:absolute;
  display:inline-block;
  width:20px;
  height:20px;
  top:10px;
  right:10px;
  z-index:1;
  box-shadow: 0 0 10px #fff;
  cursor:pointer;
  overflow:hidden;
  transition: .6s;
}
#close:checked+.close{
  width:0;
  height:0;
  transition: .6s;
}
.trigger:checked+.content{
  width:100%;
  height:100vh;
  transition: .6s;
}
.trigger:checked+.content .wrapper h1{
  position:relative;
  top:0;
  transform:translateY(0);
  transition: .6s;
}
.trigger:checked+.content .wrapper div{
  top:0;
  transition: .6s;
}