JSFiddle - React, Tailwind, and code Playground

by est vavivu

HTML

<div id="Button1" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';">
Tari Saman</div>
<div id="Button2" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';">
Sapi Perah</div>
<div id="Button3" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';">
Kucing Tarung</div>
<div id="Content1">
<iframe width="420" height="315" src="//www.youtube.com/embed/KXwKxKRnQEI" frameborder="0" allowfullscreen></iframe> </div>
<div id="Content2">
<iframe width="420" height="315" src="//www.youtube.com/embed/Q5r80Sr_tBw" frameborder="0" allowfullscreen></iframe> </div>
<div id="Content3">
<iframe width="420" height="315" src="//www.youtube.com/embed/5mypyFipOCM" frameborder="0" allowfullscreen></iframe> </div>

CSS

#Button1,#Button2{margin-top:-30px;padding:0;text-align:center;float:left;border:1px solid #aaa;background:#00f9ff;cursor:pointer;width:32%;height:25px;line-height:25px}
#Button2{margin-left:34%}
#Button3{margin-top:-30px;margin-right:-2px;padding:0;text-align:center;float:right;border:1px solid #aaa;background:#00f9ff;cursor:pointer;width:32%;height:25px;line-height:25px}
#Content1{display:block;width:100%;height:400px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:center;background:#000; overflow: auto;}
#Content2,#Content3{display:none;width:100%;height:400px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:center;background:#000; overflow: auto;}
#Content1 p,#Content2 p,#Content3 p{margin:10px}