JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="container">
    <div class="select">
        <div class="numOfMonth">12 mo</div>
        <div class="price">2.99/mo</div>
        <div class="sale">ON SALE</div>
        <div class="square"><div class="triangle"></div></div>
    </div>
    <div class="options display">
        <div class="item">
            <div>
                <div class="numOfMonth">3 mo</div>
                <div class="price">2.99/mo</div>
                <div class="sale">ON SALE</div>
            </div>
            <div>
                <div class="del"><del>5.99/mo</del></div>
                <div class="save">Save 50%</div>
            </div>
        </div>
        <div class="item active">
            <div>
                <div class="numOfMonth">12 mo</div>
                <div class="price">2.99/mo</div>
                <div class="sale">ON SALE</div>
            </div>
            <div>
                <div class="del"><del>5.69/mo</del></div>
                <div class="save">Save 50%</div>
            </div>
        </div>
        <div class="item">
            <div>
                <div class="numOfMonth">24 mo</div>
                <div class="price">2.99/mo</div>
                <div class="sale">ON SALE</div>
            </div>
            <div>
                <div class="del"><del>5.39/mo</del></div>
                <div class="save">Save 50%</div>
            </div>
        </div>
        <div class="item">
            <div>
                <div class="numOfMonth">36 mo</div>
                <div class="price">2.99/mo</div>
                <div class="sale">ON SALE</div>
            </div>
            <div>
                <div class="del"><del>5.09/mo</del></div>
                <div class="save">Save 50%</div>
            </div>
        </div>
    </div>
</div>

CSS

.container{
    width:250px;
    cursor: pointer;
}

.active{
    background:#E4EFC7;
}

.select>.numOfMonth{
    width: 26%;
}

.select>.sale{
    width: 32%;
}

.item>div>div, .select>div{
    display: inline-block;
}

.item{
    padding: 3px;
}

.numOfMonth{
    width: 26%;
    padding-left: 5px;
}

.price{
    width: 25%;
    text-align:center;
}

.sale{
    width: 41%;
    text-align: right;
}

.del{
    width:53%;
    text-align:right;
}

.sale, .price, .save{
    color: #D00000;
}

.numOfMonth, del{
    color: #707070;
}

.select{
    height: 20px;
    border: 1px solid silver;
    padding:3px;
}

.item{
    border-bottom: 1px solid silver;
}

.options{
   /* display: none;*/
    border-left: 1px solid silver;
    border-right: 1px solid silver;
}

.item:hover{
    background:whitesmoke;
}
.active:hover{
    background:#E4EFC7;
}

del{
    margin-left:32%;
}

.save{
    margin-left:37px;
}

/*
.options{
    padding:3px;
    position: relative;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
}
*/
.square{
    position:relative;
    top:-2px;
    left:2px;
    background-color: #ddd;
    /*display: inline-block;*/
    width: 24px;
    height: 24px;
    float:right;
}

.triangle{
    position:relative;
    top: 9px;
    left:7px; 
    width:0;
    height:0;    
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #555;
}

.display{
    display: none;
}

JavaScript

var $clickedItem, numOfMonth;

$('.select').click(function(){
    $('.options').toggleClass('display');
    return false;
});

$('.item').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
    numOfMonth = $('.active .numOfMonth').html();
    $('.select .numOfMonth').text(numOfMonth);
    $('.options').addClass('display');
});