JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<div id="header">Click Me</div>
<div class="bc">
  <img src="http://i49.tinypic.com/t9a8sn.png" id="1" />
  <img src="http://i49.tinypic.com/t9a8sn.png" id="2" />
  <img src="http://i49.tinypic.com/t9a8sn.png" id="3" />
</div>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

CSS

body {
  background: #202020;
  text-align: center;
  margin: 0px;
}
#header {
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 20px;
  background:#ccc;
  font-weight:800;
}
div.bc {
  border: 15px #1d1d1d solid;
  -moz-border-bottom-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d;
  -moz-border-top-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d;
  -moz-border-left-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d;
  -moz-border-right-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d;
  border-radius:10px;
  margin:50px auto;
  width: 320px;
  height: 250px;
}
div.bc img {
  margin-top:22px;
  width:283px;
  height:53px;
}

JavaScript

$(".bc").hide();
$(".bc img").hide();
$("#header").click(function () {
  var selectedEffect = "slide";
  
  $(".bc").stop(true, true).delay(500).slideDown(500);
  $("#1").stop(true, true).delay(800).effect(selectedEffect, 600);
  $("#2").stop(true, true).delay(1200).effect(selectedEffect, 600);
  $("#3").stop(true, true).delay(1600).effect(selectedEffect, 600);
});