JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div class="wrapper">
<ul id="slideshow" class="slider">
<li class="slide"><img src="http://placeholdit.imgix.net/~text?txtsize=96&bg=0088cc&txtclr=fff&txt=slide1&w=300&h=350&txttrack=0" /></li>
<li class="slide"><img src="http://placeholdit.imgix.net/~text?txtsize=96&bg=00FFcc&txtclr=fff&txt=slide2&w=400&h=300&txttrack=0" /></li>
<li class="slide"><img src="http://placeholdit.imgix.net/~text?txtsize=96&bg=cccccc&txtclr=fff&txt=slide3&w=300&h=350&txttrack=0" /></li>
<li class="slide"><img src="http://placeholdit.imgix.net/~text?txtsize=96&bg=444&txtclr=fff&txt=slide4&w=300&h=350&txttrack=0" /></li>
<li class="slide active"><img src="http://placeholdit.imgix.net/~text?txtsize=96&bg=00ffcc&txtclr=fff&txt=slide5&w=300&h=350&txttrack=0" /></li>
</ul>

</div>

CSS

body {
  background: #333;
}
.wrapper {
  width: 320px;
  height: 480px;
  margin: 20px auto;
  background: #ccc;
  border: 5px solid #fff;
}
.wrapper ul {
  list-style-type: none;
  padding: 0;
  width: 100%;
  height: 100%;
}
.wrapper ul li {
  text-align: center;
  display: none;
}
.wrapper ul li.active {
  display: block;
}