JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<div id="radioFilters">
    <div class="selected unfilter"> </div>
    <div class="filter1"> </div>
    <div class="filter2"> </div>
    <div class="filter3"> </div>
</div>

CSS

#radioFilters{
        padding:0 10px;
        width:240px;
        margin:auto;
        margin-bottom:30px;
        border-radius:5px;
    }
        #radioFilters div{
            display:inline;
            float:left;
            width:50px;
            height:50px;
            margin:5px 0px 0px 5px;
            opacity:0.5;
        }
            #radioFilters div.unfilter{background-color:black; margin-right:15px;}
            #radioFilters div.filter1{background-color:red;}
            #radioFilters div.filter2{background-color:green;}
            #radioFilters div.filter3{background-color:blue;}
            
            #radioFilters div.selected{opacity:1;}
            
        #radioFilters div:hover{
            cursor:pointer;
        }

JavaScript

$('#radioFilters div').mouseover(function() {
        $(this).stop('true','true').animate({
            opacity: 1
        }, 200);
    }).mouseout(function() {
        if(!$(this).hasClass("selected"))
        {
            $(this).stop('true','true').animate({
                opacity: 0.5
            }, 500);
        }
    });
    
    $('#radioFilters div').click(function() {
        $('#radioFilters div.selected').stop('true','true').animate({
            opacity: 0.5
        }, 200).removeClass('selected');
        $(this).addClass('selected').stop('true','true').animate({
            opacity: 1
        }, 500);
                
    });