JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Zkouška pozicování</h1>
<section class="obal">
  <section class="red"></section>
  <section class="orange"></section>
  <section class="purple"></section>
</section>

<button class="ukazred">Ukaž červený box</button>
<button class="ukazorange">Ukaž orange box</button>
<button class="ukazpurple">Ukaž fialový box</button>

CSS

.obal{
  width:400px;
  height:450px;
  border:1px solid black;
}
.red{
  background:#bf4040;
  width:400px;
  height:450px;
  position:absolute;top:8%;
}
.orange{
  background:orange;
  width:400px;
  height:450px;
  position:absolute;top:8%;
}
.purple{
  background:purple;
  width:400px;
  height:450px;
  position:absolute;top:8%;
}

JavaScript

$(document).ready(function(){
  $('.red').show();
  $('.orange').hide();
  $('.purple').hide();
});

$('.ukazred').on('click', function(){
	$('.red').show();
	$('.orange').hide();
  $('.purple').hide();
});

$('.ukazorange').on('click', function(){
  $('.orange').show();
  $('.red').hide(); 
  $('.purple').hide();
});

$('.ukazpurple').on('click', function(){
  $('.purple').show();
  $('.orange').hide();
  $('.red').hide();
});