JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="slider-radio" id="slider-radio-1" class="slider-input" checked>
				<input type="radio" name="slider-radio" id="slider-radio-2" class="slider-input">
				<input type="radio" name="slider-radio" id="slider-radio-3" class="slider-input">
				<input type="radio" name="slider-radio" id="slider-radio-4" class="slider-input">
				<div class="slider-phone">
					<div class="slider-buttons">
						<label for="slider-radio-3" class="slider-radio-label"></label>
						<label for="slider-radio-1" class="slider-radio-label"></label>
						<label for="slider-radio-4" class="slider-radio-label"></label>
						<label for="slider-radio-2" class="slider-radio-label"></label>
					</div>
				</div>

CSS

.slider-input {display: none;}
  .slider-phone {
    position: absolute;
    width: 434px;
    height: 806px;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
    #slider-radio-1:checked ~ .slider-phone {
      background: url("http://lorempixel.com/292/10/sports") 50% 50% no-repeat,
                  url("http://lorempixel.com/292/518/sports") 50% 50% no-repeat,
                  url("http://placehold.it/434x806/") 50% 50% no-repeat;
    }
    #slider-radio-2:checked ~ .slider-phone {
      background: url("http://lorempixel.com/292/10/sports") 50% 50% no-repeat,
                  url("http://lorempixel.com/292/518/food") 50% 50% no-repeat,
                  url("http://placehold.it/434x806/") 50% 50% no-repeat;
    }
    #slider-radio-3:checked ~ .slider-phone {
      background: url("http://lorempixel.com/292/10/sports") 50% 50% no-repeat,
                  url("http://lorempixel.com/292/518/fashion") 50% 50% no-repeat,
                  url("http://placehold.it/434x806/") 50% 50% no-repeat; 
    }
    #slider-radio-4:checked ~ .slider-phone {
      background: url("http://lorempixel.com/292/10/sports") 50% 50% no-repeat,
                  url("http://lorempixel.com/292/518/transport") 50% 50% no-repeat,
                  url("http://placehold.it/434x806/") 50% 50% no-repeat; 
    }
    #slider-radio-1:checked ~ .slider-phone,
    #slider-radio-2:checked ~ .slider-phone,
    #slider-radio-3:checked ~ .slider-phone,
    #slider-radio-4:checked ~ .slider-phone {
      background-size: 67.3% auto,
                       67.3% auto,
                       100% auto;       
    }
    .slider-buttons {padding: 31% 16% 22% 16%;}
    .slider-radio-label {
      margin: 33% 0 0 72%;
      cursor: pointer;
      display: block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);
    }.slider-radio-label:nth-child(2n) {
        margin: 30% 0 0 28%;
      }
     ...