JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="slider">

  <input type="radio" name="slide" id="image1" checked/>
  <label for="image1">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(1).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(1).jpg"/>

  <input type="radio" name="slide" id="image2"/>
  <label for="image2">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(2).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(2).jpg"/>

  <input type="radio" name="slide" id="image3"/>
  <label for="image3">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(3).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(3).jpg"/>

  <input type="radio" name="slide" id="image4"/>
  <label for="image4">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(4).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(4).jpg"/>

  <input type="radio" name="slide" id="image5"/>
  <label for="image5">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(5).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(5).jpg"/>

  <input type="radio" name="slide" id="image6"/>
  <label for="image6">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(6).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(6).jpg"/>

  <input type="radio" name="slide" id="image7"/>
  <label for="image7">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(7).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(7).jpg"/>

  <input type="radio" name="slide" id="image8"/>
  <label for="image8">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(8).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(8).jpg"/>

  <input type="radio" name="slide" id="image9"/>
  <label for="image9">
		<img src="http://www.beingmac.com/ebay/melrose_s9_pic_(9).jpg"/>
	</label>
  <img src="http://www.beingmac.com/ebay/melrose_s9_pic_(9).jpg"/>

  <input...

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #ccc;
}

.slider {
  width: 640px;
  position: relative;
  padding-top: 480px;
  margin: 20px auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}

.slider > img {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s;
}

.slider input {
  display: none;
}

.slider label {
  width: 60px;
  margin: 20px 2px;
  float: left;
  border: 2px solid #999;
  cursor: pointer;
  transition: all 0.5s;
  opacity: 0.6;
  box-sizing: border-box;
}

.slider label img {
  width: 100%;
  display: block;
}

.slider input:checked + label {
  border-color: #666;
  opacity: 1;
}

.slider input ~ img {
  opacity: 0;
  transform: scale(1.1);
}

.slider input:checked + label + img {
  opacity: 1;
  transform: scale(1);
}