JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parallax">
        <div class="bg-main">
        </div>
        <div class="bg-middle">  
        </div>
        <div class="bg-front-left">
        </div>
        <div class="bg-front-right">
        </div>
    </div>
    <div class="select-wrapper">
                    <div class="hero-select">
                        <p>Choose your character</p>
                        <form action="index.html" class="hero-select-form" method="get">
                            <ul class="list">
                                <li class="item">
                                    <label>
                                        <input name="hero" class="hero-valkirye" type="radio" value="" checked>
                                        <span class="title"><img class="valkyrie-picker-hover" src="http://i6.pixs.ru:/storage/8/6/1/valkyrieon_7701017_13767861.png" alt="1">
                                        <img class="valkyrie-picker-off" id="off" src="http://i6.pixs.ru:/storage/8/5/7/valkyrieof_6219820_13767857.png" alt="1">
                                        <img class="valkyrie-picker-on" src="http://i6.pixs.ru:/storage/8/5/9/valkyrieon_5426953_13767859.png" alt="1">
                                        </span>
                                    </label>
                                </li>
                                <li class="item">
                                    <label>
                                        <input name="hero" class="hero-trooper" type="radio" value="" >
                                        <span class="title"><img class="valkyrie-picker-hover" src="http://i6.pixs.ru:/storage/8/6/1/valkyrieon_7701017_13767861.png" alt="1">
                                        <img class="valkyrie-picker-off" src="http://i6.pixs.ru:/storage/8/5/7/valkyrieof_6219820_13767857.png" alt="1">
                                        <img class="valkyrie-picker-on" src="http://i6.pixs.ru:/storage/8/5/9/valkyrieon_5426953_13767859.png"...

SCSS

/* add full reset */
@import "compass/reset";
/* add file for using clearfix */
@import "compass/utilities/general/clearfix";
/**/
@import "compass/css3";


body {
    background: #000000;
}


#parallax {
    overflow: hidden;
    margin: 0 auto;
}

.bg-main {
    width: 100%;
    height: 1100px;
    position: fixed;
    background: url("http://i6.pixs.ru:/storage/8/6/9/mainbgpng_2226454_13767869.png") no-repeat transparent top center;
    top: 0%;
    margin-top: -10px;
    left: 0%;
    margin-left: -10px;
}

.bg-middle {
    width: 100%;
    height: 1100px;
    position: fixed;
    background: url("http://i7.pixs.ru:/storage/8/7/8/middlebgpn_7539144_13767878.png") no-repeat transparent top center;
}

.bg-front-left {
    background: url("http://i7.pixs.ru:/storage/8/6/5/leftfrontb_2143956_13767865.png") no-repeat center top;
    left: -50px;
    width: 355px;
    height: 1100px;
    position: fixed;
}
.bg-front-right {
    background: url("http://i7.pixs.ru:/storage/8/8/4/rightfront_9164171_13767884.png") no-repeat transparent top right;
    right: -1px;
    width: 404px;
    height: 1100px;
    position: fixed;
}


.select-wrapper {
    @include clearfix;
    margin: 0 auto;
    border: 1px solid #d3d3d3;
    width: 1097px;
}


/*hero select buttons*/
.hero-select {
    margin: 120px 0 0 0;
    float: left;
    & p {
        font-family: Arial;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
    }
    /* conteiner for button with (+) z-index */
    & .item label {
        display:inline-block;
        position:relative;
        z-index:2;
        padding:.2em 1em .3em;
        cursor:pointer;
        width: 290px;
        height: 235px;
    }
    /* hide image animation in the normal state */
    & .item label img[class*="picker-hover"] {
        position: absolute;
        z-index: 0;
        margin-left: 42px;
        display: none;
    }
    /* make the effect of pushing the button */
    & .item label .title:active {
       ...

JavaScript

/*global $, jQuery, alert*/
$(function () {
    'use strict';
	var $heroSelectForm = $('[class="hero-select-form"]'),
		$heroesRadio = $heroSelectForm.find('[name="hero"]'),
        $heroes = $('[id*="pick"]'),
		$activeRadio = $heroesRadio.filter(':checked');

	$(document).on('change', '[name="hero"]', function () {
		setForm(this);
	});

	if (!$activeRadio.length) {
		$activeRadio = $heroesRadio.eq(0);
		$activeRadio.trigger('click');
	} else {
		setForm($activeRadio.get(0));
	}
    
    function setForm(input) {
		if ($activeRadio.data('[class*="valkyrie"]')) {
            $heroes.data('[id*="Valkyrie"]').css('display', 'block');
        }
        if ($activeRadio.data('[class*="trooper"]')) {
            $heroes.data('[id*="Trooper"]').css('display', 'block');
        }
	}
});