JSFiddle - React, Tailwind, and code Playground

by karinafoto

HTML

<center>
<div class="kotak">
 <div class="effec">
    <img id="gambar1"src=" http://i224.photobucket.com/albums/dd200/amigdalus/FRES.jpg">
    <img id="gambar2"src=" http://e-kuta.com/blog/wp-content/uploads/2011/02/kadek.jpg">
    <img id="gambar3"src=" http://indonesiaindonesia.com/imagehosting/images/882/1_dian_036.jpg"></div></div>
    </center>
  <p>
<center>
    <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></p>
<br/><br/>
<p>Nah buat sobat yang pingin tahu Cara membuat slide image  sederhana silahkan klik <a href="http://karinafotocollection.blogspot.com/2012/08/cara-membuat-slide-image-sederhana.html">Disini</a></p>

CSS

.kotak{border:3px solid #222;height:400px;width:400px;-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: 400px;
       height: 400px;
       overflow: hidden;
       position: absolute;
    }