JSFiddle - React, Tailwind, and code Playground

HTML

<div class="widget scheme col-lg-4 col-md-4 col-sm-6 col-xs-12 row-lg-6 row-md-6 row-sm-6 row-xs-8" id="scheme_widget_panel">
	<div class="container">
		
		<div class="scheme_panel left scheme_messages">
                <h1>Home</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
                    magna aliquyam erat, sed diam voluptua. 
                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
                    ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed      
                    labore et dolore magna aliquyam erat,sed diam voluptua. At vero eos et accusam et
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.                     
              </p>
		</div>

		<div class="scheme_panel center scheme_tasks">
           <h1>Über uns</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
                    magna aliquyam erat, sed diam voluptua...................... At vero eos et accusam 
                    justo duo dolores et ea rebum. Stet clita kasd gubergren, 
                    ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing...
              </p>
        </div>

		<div class="scheme_panel right scheme_assets">
            <h1>Kontakt</h1>
                <p>Kontakt ---- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
                    magna aliquyam erat, sed diam voluptua. 
                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
                    ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed      
                    labore et dolore magna aliquyam erat,sed diam voluptua. At vero eos et accusam et
                    et ea rebum. Stet clita kasd gubergren, no sea takimata...

CSS

#scheme_widget_panel {
    height: 350px;
}

ul {
    list-style:none;
    padding:0;
    margin:0;
}

.scheme_panel li {
    border:1px solid gray;
}

.widget.scheme {
  -webkit-perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective: 800px;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective: 800px;
  -ms-perspective-origin: 50% 50%;
  perspective: 800px;
  perspective-origin: 50% 50%;
}
.widget.scheme .container {
    height:300px;
  position: relative;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  height: calc(100% - 30px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.widget.scheme .container.show_right {
  -webkit-transform: rotateY(-90deg) translateX(-100%);
  -webkit-transform-origin: center left;
  -moz-transform: rotateY(-90deg) translateX(-100%);
  -moz-transform-origin: center left;
  -ms-transform: rotateY(-90deg) translateX(-100%);
  -ms-transform-origin: center left;
  -o-transform: rotateY(-90deg) translateX(-100%);
  -o-transform-origin: center left;
  transform: rotateY(-90deg) translateX(-100%);
  transform-origin: center left;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.widget.scheme .container.show_left {
  -webkit-transform: rotateY(90deg) translateX(100%);
  -webkit-transform-origin: center right;
  -moz-transform: rotateY(90deg) translateX(100%);
  -moz-transform-origin: center right;
  -ms-transform: rotateY(90deg) translateX(100%);
  -ms-transform-origin: center right;
  -o-transform: rotateY(90deg) translateX(100%);
  -o-transform-origin: center right;
  transform: rotateY(90deg) translateX(100%);
  transform-origin: center right;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:...

JavaScript

var widget = document.getElementById('scheme_widget_panel');
var container = widget.getElementsByClassName('container')[0];
var list = document.getElementById('scheme_panel_selector');

list.addEventListener('click', function(event) {
	var target = event.target;
	var panel = event.target.getAttribute('data-panel');
	var classList = "container show_" + panel;
	container.setAttribute('class', classList);
	
	var siblings = event.target.parentElement.children;
	for(i=0; i < siblings.length; i++) {
		siblings[i].classList.remove('active');
	}

	event.target.classList.add('active');
});