JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<form>
    <ul class="no-disc term-options" data-term-options>
        <li class="term-option">
            <input checked class="term-option-input" id="term-option-30" name="term-option" type="radio" value="30" />
            <label class="term-option-label" data-term-option for="term-option-30">30 Years</label>
        </li>
        <li class="term-option">
            <input class="term-option-input" id="term-option-25" name="term-option" type="radio" value="25" />
            <label class="term-option-label" data-term-option for="term-option-25">25 Years</label>
        </li>
        <li class="term-option">
            <input class="term-option-input" id="term-option-20" name="term-option" type="radio" value="20" />
            <label class="term-option-label" data-term-option for="term-option-20">20 Years</label>
        </li>
        <li class="term-option">
            <input class="term-option-input" id="term-option-15" name="term-option" type="radio" value="15" />
            <label class="term-option-label" data-term-option for="term-option-15">15 Years</label>
        </li>
        <li class="term-option">
            <input class="term-option-input" id="term-option-10" name="term-option" type="radio" value="10" />
            <label class="term-option-label" data-term-option for="term-option-10">10 Years</label>
        </li>
    </ul>
</form>

SCSS

$blueLight: #c3d3e3;
$blue: #2081bf;
$grayDark: #5a5a5a;
$white: #fff;

.term-options {
    background: $white;
    border: 1px solid $grayDark;
    color: $grayDark;
    width: 10em;

    &.is-selecting {
        .term-option-input:checked + .term-option-label {
            background: $blueLight;

            &:hover {
                background: $blue;
                color: $white;
            }
        }

        .term-option-label {
            display: block;
        }
    }
}

.term-option {
    display: block;
    width: 100%;
}

.term-option-input {
    left: -999999px;
    position: absolute;

    &:checked + .term-option-label {
        display: block;
    }

    + .term-option-label {
        cursor: pointer;
        display: none;
        width: 100%;

        &:hover {
            background: $blue;
            color: $white;
        }
    }
}

JavaScript

$('[data-term-option]').on('click', function() {
	$('[data-term-options]').toggleClass('is-selecting');
});