JSFiddle - React, Tailwind, and code Playground

by karinafoto

HTML

<center>
 <div class="kotak">
  <div class="effec">
     <img id="gambar1"width="300"height="300"align="center"src=" http://lh3.googleusercontent.com/-nhT3WXXAZUE/AAAAAAAAAAI/AAAAAAAAAZ4/l_Oarll2yIc/s512-c/photo.jpg">
     <img id="gambar2"width="300"height="300"align="center"src=" http://e-kuta.com/blog/wp-content/uploads/2011/02/kadek.jpg">
     <img id="gambar3"width="300"height="300"align="center"src=" http://indonesiaindonesia.com/imagehosting/images/882/1_dian_036.jpg"></div></div>
     </center>
<br/>
 <center><div class="tab-img">
     <a href="#gambar1"><button>gambar 1</button></a>
 <a href="#gambar2"><button>gambar 2</button></a>
 <a href="#gambar3"><button>gambar 3</button></a>
     </center></div>

CSS

.kotak{border:3px solid  #222;height:300px;width:300px;-webkit-border-radius:  10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow:  1px 0px 5px 5px rgba(2, 2, 10, 1);box-shadow: 1px 0px 5px 5px rgba(2, 2,  10, 1); overflow:hidden;}.effec{width: 300px;height: 300px;overflow:  hidden;position:absolute;}

.tab-img{width:300px;background:transparent}