JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<section class="half">
  <div id="containertop">
  <div class="titletextup">
  	UP 
    <br>
    <div id="triangle-facing-top"></div>
  </div> 
  </div>
</section>

<section class="half">
  <div class="titletextdown">
  	<div id="triangle-facing-bottom"></div>
  	<br>
    DOWN 
  </div>
</section>

CSS

@charset "UTF-8";
* {
    margin: 0; padding: 0;
}

html, body, #container {
    height: 100%;
	font-family: 'corbertregular', arial, sans-serif;
	font-size:24px;
	color:white;
}
header {
    height: 50px;
    background: gray;
}
main {
    height: calc(100% - 50px);
    background: green;
}
.half {
    height: 50%;
	position: relative;
}
.half:first-child {
    
	border-bottom:10px;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	border-bottom-color:white;
	border-style:solid;
}

#containertop {
	background: blue;
	height: 100%;
}

.half:first-child > #containertop{
	position:absolute;
    z-index:1;
	width:100%;
	top:0px;
	
	webkit-animation-duration: 2s; 
    -webkit-animation-delay: 0s;     
    animation-duration: 2s;
    animation-delay: 0s;
	
	transition: all 2.0s forwards;
   -webkit-transition: all 2.0s forwards; 
}

.half:first-child:hover > #containertop{
	-webkit-animation-duration: 2s; 
    -webkit-animation-delay: 0s;     
    animation-duration: 2s;
    animation-delay: 0s;
	
	animation: moveSectionToTop 2.0s forwards;
   -webkit-animation: moveSectionToTop 2.0s forwards; 
}

@-webkit-keyframes moveSectionToTop {
    from   {}
    to {top:-100%;}
}

@keyframes moveSectionToTop {
    from   {}
    to {top:-100%}
}

.half:last-child {
    background: green;
	border-top:10px;
	border-bottom:0px;
	border-left:0px;
	border-right:0px;
	border-top-color:white;
	border-style:solid;
}

.titletextup{
  text-align:center;
}

.titletextdown{
 text-align:center;
}

#triangle-facing-top {
    display: inline-block;
    margin: 72px;
    border-right: 24px solid; border-bottom: 24px solid;
    width: 120px; height: 120px;
    transform: rotate(-135deg);
	display: inline-block;
   -webkit-transform:rotate(-135deg);
   -moz-transform:rotate(-135deg);
   -o-transform:rotate(-135deg);
   color: white;
}

#triangle-facing-bottom {
    display: inline-block;
    margin: 72px;
    border-right: 24px solid; border-bottom: 24px solid;
    width: 120px; height:...