JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<a href="javascript:;" title="Close Message" evergage-hideonclick="evergage-hideonclick" style="z-index: 2147483647; right: 0px; position: absolute; width: 26px; top: -12px; left: 888px;" evergage-closeicon="evergage-closeicon" class="evergage-close-btn">
</a>

<div id="evergage-tooltip-ambPREVIEW">
    <div class="evergage-style-quiz-head">
        
        <FONT>WHATS YOUR KITTEN?
        
    </div>  
    <ul class="evergage-4-panel-quiz">
        <li>
            <img src="https://placekitten.com/g/300/300" alt="" />
        </li>
        <li>
            <img src="https://placekitten.com/g/300/300" alt="" />
        </li>
        <li>
            <img src="https://placekitten.com/g/300/300" alt="" />
        </li>
        <li>
            <img src="https://placekitten.com/g/300/300" alt="" />
        </li>
    </ul>
    <div class="evergage-submit-4-panel-quiz"> 
        
        <a href="#" target="_blank" evergage-hideonclick="evergage-hideonclick" class="evergage-cta" style="" data-original-title="" title="">
        Ligula Porta
        </a>
        
    </div>
</div>

CSS

body {
    background: #989899;
}
#evergage-tooltip-ambPREVIEW * {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#evergage-tooltip-ambPREVIEW {
    margin: 15px 0px 0px 15px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.54902) 0px 0px 8px 0px;
    box-shadow: rgba(0, 0, 0, 0.54902) 0px 0px;
    height: 460px;
    width: 900px;
    background-attachment: initial;
    background-color: rgb(255, 255, 255);
    background-size: initial;
    background-origin: initial;
    background-clip: initial;
    position: relative;
}
#evergage-tooltip-ambPREVIEW .evergage-close-btn {
    background-image: url("//cdn.evergage.com/evergage-content/ruelala/btn_close.png");
    width:26px;
    height:26px;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 11px;
    top: 0;
}
#evergage-tooltip-ambPREVIEW ul.evergage-4-panel-quiz {
    list-style-type: none;
    width: 820px;
    height: 200px;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -sand-transform: translateY(-50%) translateX(-50%);
    text-align: center;
}
#evergage-tooltip-ambPREVIEW .evergage-4-panel-quiz li {
    display: inline-block;
}
#evergage-tooltip-ambPREVIEW .evergage-4-panel-quiz li > img {
    width: 200px;
    height: 200px;
    padding: 8px;
    opacity: 1;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
}
#evergage-tooltip-ambPREVIEW .evergage-4-panel-quiz li.active {
}
#evergage-tooltip-ambPREVIEW .evergage-4-panel-quiz li.disabled > img {
    opacity: 0.5;
}
#evergage-tooltip-ambPREVIEW...

JavaScript

$('ul.evergage-4-panel-quiz>li').on({
    click: function () {

        var opt = $(this);

        $('ul.evergage-4-panel-quiz>li').each(function () {
            $(this).removeClass('disabled').removeClass('active');
        });

        opt.addClass('active');

        $('ul.evergage-4-panel-quiz>li').each(function () {
            if (!$(this).hasClass('active')) {
                $(this).addClass('disabled');
            }
        });

    }
});