JSFiddle - React, Tailwind, and code Playground

by nerdess

HTML

<div class="sf-slider">
    <input type="checkbox" id="sf-slider-replay">
    <div class="sf-image sf-slider-img1">
        <div class="sf-slider-img1-title">Some Text</div>
    </div>
    <div class="sf-image sf-slider-img2">
        <div class="sf-slider-img2-title">Some Text</div>
    </div>
    <div class="sf-image sf-slider-img3">
        <div class="sf-slider-img3-title">Some Text</div>
        <div class="sf-slider-replay">
            <label for="sf-slider-replay"></label>
        </div>
    </div>
</div>

CSS

.sf-slider {
    width: 540px;
    height: 265px;
    position: relative;
}
.sf-image.sf-slider-img1 {
    background: url(http://www.echternacht.com/files/nta_pfm/PBC.next/css/screen/../../images/DB_Baufi_Haus_728x265px.jpg) no-repeat 0 0;
    animation-delay: 5s;
}
.sf-image.sf-slider-img2 {
    background: url(http://www.echternacht.com/files/nta_pfm/PBC.next/css/screen/../../images/DB_Ferienhaus_728x265px.jpg) no-repeat 0 0;
    animation-delay: 5s;
    opacity: 0;
}
.sf-image.sf-slider-img3 {
    background: url(http://www.echternacht.com/files/nta_pfm/PBC.next/css/screen/../../images/DB_PK_Mini_728x265px.jpg) no-repeat 0 0;
    animation-delay: 12s;
    opacity: 0;
}
.sf-image {
    width: 540px;
    height: 265px;
    position:absolute;
    left:0;
}
/*Initial animation */
 .sf-image.sf-slider-img1 {
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-name: fadeOut;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
.sf-image.sf-slider-img2 {
    animation-duration: 12s;
    animation-iteration-count: 1;
    animation-name: fadeInOut;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
.sf-image.sf-slider-img3 {
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-name: fadeIn;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeInOut {
    0% {
        opacity:0;
    }
    17% {
        opacity:1;
    }
    25% {
        opacity:1;
    }
    92% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/*replay animation when button is hit*/
 input#sf-slider-replay:checked ~ .sf-image:nth-of-type(1) {
    opacity: 1;
    animation-fill-mode: none;
    animation-delay: 2s;
}
input#sf-slider-replay:checked ~...