JSFiddle - React, Tailwind, and code Playground

by Clemens Himmer

HTML

<script src="https://code.jquery.com/jquery-1.2.1.min.js"></script>
<div class="clients">
        <!--labels i wanna style-->
            <label class="checked-label" for="slide-1-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img02.jpg"></label>

            <label for="slide-2-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img03.jpg"></label>

            <label for="slide-3-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img04.jpg"></label>  

         <div class="wrapper">
            <div id="carousel">

                <input id="slide-1-trigger" type="radio" value="slider1" name="sliders" checked>
                <div class="slide1 slider">
                        <a href="#">robert adams</a>
                        <p><q>Pellentesque sagittis, ipsum a tempor venenatis, ante justo molestie massa, quis aliquam est leo at lacus. Donec vel lacus egestas est rutrum vehicula eu eu lorem. Duis in faucibus ipsum, et fermentum neque. Curabitur egestas ipsum vitae erat tempus posuere. Donec elit nulla, varius sed vehicula et, ultrices id turpis. Aenean quis urna posuere, feugiat ex ut, congue mauris. Maecenas dapibus est at tellus malesuada congue vitae ac diam.</q></p>
                </div>

                <input id="slide-2-trigger" type="radio" value="slider2" name="sliders">
                <div class="slide2 slider">
                        <a href="#">monica perry</a>
                        <p><q>Nullam eu viverra ex. Aenean non lectus sit amet urna ultricies interdum at vehicula sem. Ut ac erat ante. Pellentesque tincidunt, dolor id ornare vestibulum, dolor diam consequat sapien, id pulvinar velit ex aliquet lectus. Cras elementum velit eget urna commodo ultrices. Sed sit amet quam molestie, lobortis justo in, efficitur diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar pharetra</q></p>
                </div>

   ...

CSS

.checked-label{
  background-color:red;
}

JavaScript

// On document ready
$(document).ready(function() {
		// Bind listener to the inputs
    $('input:radio').change(function(){
        // On change, get the ID of the changed radio
    		var id = $(this).attr("id");
        // Remove the class .checked-label from the labels
        $("label.checked-label").removeClass("checked-label");
        // Add the class to the label for the checked radio
        $("label[for='"+id+"']").addClass("checked-label");
    });  
});