JSFiddle - React, Tailwind, and code Playground

HTML

<body>

        <article id="slider">
                    <input checked type="radio" name="slider" id="switch1">
                    <input type="radio" name="slider" id="switch2">
                    <input type="radio" name="slider" id="switch3">
                    <input type="radio" name="slider" id="switch4">
                    <input type="radio" name="slider" id="switch5">

                <div id="controls">
                    <label for="switch1"></label>
                    <label for="switch2"></label>
                    <label for="switch3"></label>
                    <label for="switch4"></label>
                    <label for="switch5"></label>
                </div>
            </article>

</body>

CSS

#switch1:checked ~ #controls label:nth-child(5), 
    #switch2:checked ~ #controls label:nth-child(1),
    #switch3:checked ~ #controls label:nth-child(2),
    #switch4:checked ~ #controls label:nth-child(3),
    #switch5:checked ~ #controls label:nth-child(4){
    background: red; /*заливка фона картинкой без повторений*/
    float: left;
    margin: 0 auto; /*сдвиг влево*/
    display: block;
    height: 68px;
    width: 68px;
}