JSFiddle - React, Tailwind, and code Playground

by Zhelyakea

HTML

<body>
<div class="main center width98  blueBackround padding1">
<div class="center">
    <h2>Выбор мойщика</h2>
<button class="button person blue">Васильев Василий Васильевич</button>
<button class="button person blue">Петров Петр Петрович</button>
<button class="button person blue">Николаев Николай Николаевич</button>
<button class="button person blue">Сашков Сашка Сашкович</button>
<button class="button person blue">Васильев Василий Васильевич</button>
<button class="button person blue">Петров Петр Петрович</button>
<button class="button person blue">Николаев Николай Николаевич</button>
<button class="button person blue">Сашков Сашка Сашкович</button>
</div>
    <button class="button otmena">Отмена</button>
    <button class="button box greenButton">Выбрать</button>
</div>
    <br>
<div class="main center width98 padding1 greenBackround">
<div class="center">
    <h2>Выбор бокса</h2>
<button class="button box green">Бокс 1</button>
<button class="button box green">Бокс 2</button>
<button class="button box green">Бокс 3</button>
<button class="button box green">Бокс 4</button>
<button class="button box green">Бокс 5</button>
<button class="button box green">Бокс 6</button>
<button class="button box green">Бокс 7</button>
<button class="button box green">Бокс 8</button>
</div>
    <button class="button otmena">Отмена</button>
    <button class="button box green">Выбрать</button>
</div>
        
    <br>
<div class="main center width98 padding1 blueBackround">
<div class="center white">
<center><input class="button input" placeholder="НОМЕР АВТО"></input><center>
<center><button class="button keyboard word" name="1">1</button><button class="button keyboard word" name="2">2</button><button class="button keyboard word" name="3">3</button><button class="button keyboard word" name="4">4</button><button class="button keyboard word" name="5">5</button><button class="button keyboard word" name="6">6</button><button class="button keyboard word" name="7">7</button><button...

CSS

.context-menu {     position: absolute;
    display: none; /* Изначально не показываем его */     background-color: #fff;
   width:100px;
	box-shadow:0 5px 15px #90A4AE;
	outline: none;
	overflow:visible;
	border: 1px solid transparent;
}  
.context-menu ul { list-style: none; margin: 0; padding: 0; }      .context-menu ul li { 
    margin: 0; 
    padding: 2px;
    background-color: #fff;
    display: block; }
.context-menu ul li a {
    color: #333;
    text-decoration: none;
    font-size: 12px;
    display: block;
    padding: 5px; 
}
.context-menu ul li a:hover {
    background-color: #82B1FF;
    color:#009688;
}
.button{
    margin:5px 2.5px;
    width:119px;
    height:50px;
    cursor:pointer;
    vertical-align:middle;
    background-color: white;
    font-weight:bold;
    font-size:20px;
    display:inline-block;
	/*box-shadow:0 0 10px #90A4AE;*/
	outline: none;
	overflow:visible;
	border: 1px solid transparent;
    transition-duration:0.3s;
}
/*.person:hover{
    background-color: #82B1FF;
    color:white;
	box-shadow:0 0 20px #90A4AE;
    position:relative;
    top:-1px;
    cursor:pointer;
}*/
.person:active{
    color:white;
    background-color: #82B1FF;
	box-shadow:0 0 20px #90A4AE;
    /*position:relative;
    top:1px;*/
}
.LabelSelected{
    color:white;
    background-color: #82B1FF;
    box-shadow:0 0 20px #78909C;
    transition-duration:0.3;
}
.LabelSelected:hover{
    color:white;
    background-color: #82B1FF;
    box-shadow:0 0 20px #78909C;
    transition-duration:0.5s;
}

/*.box:hover{
    background-color: #009688;
    color:white;
	box-shadow:0 0 20px #90A4AE;
    position:relative;
    top:-1px;
    cursor:pointer;
}*/
.box:active{
    color:white;
    background-color: #4DB6AC;
	box-shadow:0 0 20px #90A4AE;
    /*position:relative;
    top:1px;*/
}
.LabelSelected2{
    color:#FFFFFF;
     background-color:#4DB6AC;
    box-shadow:0 0 20px #546E7A;
    transition-duration:0.3;
}
.LabelSelected2:hover{
    color:#FFFFFF;
   ...

JavaScript

$(document).ready(function() {
    document.oncontextmenu = function() {return false;}; 
    $(document).on('mousedown',function(event) {
        if (event.which === 1)  {
            $('*').removeClass('selected-html-element');
            $('.context-menu').remove();
        }
    })
$('.person').on('click',function(){
  	$(this).toggleClass('blue LabelSelected')  
});
$('.box').on('click',function(){
    $('.box').removeClass('LabelSelected2');
    $('.box').addClass('green');
  	$(this).toggleClass('green LabelSelected2'); 
})
$('button').on('mousedown',function(event) {  
/* Убираем css класс selected-html-element у абсолютно всех элементов на странице с помощью селектора "*":   */ 
$('*').removeClass('selected-html-element');  
        /* Удаляем предыдущие вызванное контекстное меню: */
$('.context-menu').remove();
        /* Проверяем нажата ли именно правая кнопка мыши:*/
if (event.which === 3)  {
	var target = $(event.target);                          
    // Добавляем класс selected-html-element что бы наглядно показать на чем именно мы кликнули (исключительно для тестирования):*/
    target.addClass('selected-html-element');              
// Создаем меню:             
    $('<div/>', { class: 'context-menu'}).css({left: event.pageX+'px',top: event.pageY+'px'}).appendTo('body').append( 
        $('<ul/>').append('<li><a href="#">Remove element</a></li>')
        
        .append('<li><a href="#">Add element</a></li>').append('<li><a href="#">Element style</a></li>').append('<li><a href="#">Element props</a></li>').append('<li><a href="#">Open Inspector</a></li>')).show(); 
    /*Показываем меню с небольшим стандартным эффектом jQuery. Как раз очень хорошо подходит для меню*/          }     }); });