JSFiddle - React, Tailwind, and code Playground

by Roman

HTML

<form>
    <div class="board">
		<div id="scorebar">Вы набрали:&nbsp;&nbsp;&nbsp;</div>
        <input id="bonus_01" name="radio1" class="bonus" type="radio">
        <input id="bonus_02" name="radio2" class="bonus" type="radio">
        <input id="bonus_03" name="radio3" class="bonus" type="radio">
        <input id="bonus_04" name="radio4" class="bonus" type="radio">
        <input id="bonus_05" name="radio5" class="bonus" type="radio">
        <input id="bonus_06" name="radio6" class="bonus" type="radio">
        <input id="bonus_07" name="radio7" class="bonus" type="radio">
        <input id="bonus_08" name="radio8" class="bonus" type="radio">
        <input id="bonus_09" name="radio9" class="bonus" type="radio">
        <input id="bonus_10" name="radio10" class="bonus" type="radio">
        <p class="enemy" id="enemy_01"></p>
        <p class="enemy" id="enemy_02"></p>
        <p class="enemy" id="enemy_03"></p>
        <p class="enemy enemy_t1" id="enemy_04"></p>
        <p class="enemy" id="enemy_05"></p>
        <p class="enemy" id="enemy_06"></p>
        <p class="enemy enemy_t3" id="enemy_07"></p>
        <p class="enemy" id="enemy_08"></p>
        <p class="enemy" id="enemy_09"></p>
        <p class="enemy" id="enemy_10"></p>
        <p class="enemy enemy_t1" id="enemy_11"></p>
        <p class="enemy" id="enemy_12"></p>
        <p class="enemy" id="enemy_13"></p>
        <p class="enemy enemy_t2" id="enemy_14"></p>
        <p class="enemy" id="enemy_15"></p>
        <p class="enemy" id="enemy_16"></p>
        <p class="enemy enemy_t3" id="enemy_17"></p>
        <p class="enemy" id="enemy_18"></p>
        <p class="enemy" id="enemy_19"></p>
        <p class="enemy enemy_t3" id="enemy_20"></p>
        <p class="enemy" id="enemy_21"></p>
        <p class="enemy" id="enemy_22"></p>
        <p class="enemy enemy_t1" id="enemy_23"></p>
        <p class="enemy" id="enemy_24"></p>
        <p class="enemy enemy_t2" id="enemy_25"></p>
        <p class="enemy"...

CSS

@import "http://nojsgame.majorov.su/bg.css";*{margin:0;padding:0}.board{width:400px;height:600px;margin:0 auto;background:#69c url(http://nojsgame.majorov.su/bg.jpg);cursor:url('http://nojsgame.majorov.su/r2.png') 35 0,pointer;text-align:center;position:relative}#scorebar{float:left;color:#fff}.board #status{color:#fff;position:absolute;bottom:15px;left:5px;font-size:14px}.board #status span.active{display:none}.board #status span.inactive{display:inline}.board:hover #status span.active{display:inline}.board:hover #status span.inactive{display:none}.enemy{height:64px;width:64px;margin-right:5px;margin-top:15px;position:absolute;top:-50%;left:0;background:url(http://nojsgame.majorov.su/e6.png)}.enemy_t1{height:48px;width:48px;background:url(http://nojsgame.majorov.su/e4.png)}.enemy_t2{height:64px;width:64px;background:url(http://nojsgame.majorov.su/e2.png)}.enemy_t3{height:128px;width:128px;background:url(http://nojsgame.majorov.su/e3.png)}.bonus{height:24px;width:24px;position:absolute;top:-10%;left:0;background-image:url(http://nojsgame.majorov.su/b1.png);-moz-appearance:button;-webkit-appearance:button;appearance:button}.bonus:checked{background-image:url('http://nojsgame.majorov.su/b2.png') !important;width:24px;height:24px;position:static;-webkit-animation-name:none;animation-name:none;float:left}.board .enemy:hover{border-radius:0;margin:0;height:600px;width:400px;position:absolute;top:0;left:0;z-index:999;background:#f00;overflow:visible;cursor:not-allowed;-webkit-animation:animation1 0s 0s linear !important;animation:animation1 0s 0s linear !important;-webkit-animation:animation2 0s 0s linear !important;animation:animation2 0s 0s linear !important;-webkit-animation:animation3 0s 0s linear !important;animation:animation3 0s 0s linear !important;-webkit-animation:animation4 0s 0s linear !important;animation:animation4 0s 0s linear !important;-webkit-animation:animation5 0s 0s linear !important;animation:animation5 0s 0s linear...

JavaScript

// 0 строк кода на JS