JSFiddle - React, Tailwind, and code Playground
HTML
<div class="flex numbers">
<input type="checkbox" class="block bShadow-1">
<input type="checkbox" class="block bShadow-2">
<input type="checkbox" class="block bShadow-3">
<input type="checkbox" class="block bShadow-4">
</div>
<div class="result" id="result"></div>
<script>
// выводим нажатые блоки в поле result
window.onload = function(){
var items = document.querySelectorAll('.flex input');
var result = document.querySelector('.result');
for(var i = 0; i < items.length; i++){
items[i].addEventListener("click", getShadow);
}
function getShadow(e){
var styleItem = getComputedStyle(e.target);
result.innerHTML = '.bshadow {<br>' +
'-webkit-box-shadow: ' + styleItem.boxShadow + '; <br>' +
'-moz-box-shadow: ' + styleItem.boxShadow + '; <br>' +
'box-shadow: ' + styleItem.boxShadow + ';<br>}';
}
}
</script>
CSS
.flex {
display: flex;
}
.block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
border: 0;
background: #fff !important;
}
.block::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #fff;
}
.bShadow-1{-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);-moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);}
.bShadow-2{-webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);-moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);box-shadow:0 0 20px 0 rgba(150,150,150,.1);}
.bShadow-3{-webkit-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);-moz-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);box-shadow:0 20px 60px -10px rgba(0,0,0,.1);}
.bShadow-4{-webkit-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);-moz-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);}
/* выделяем полученные блоки по клику */
.result {
border: 1px solid #dedede;
-webkit-border-radius: .25rem;
-moz-border-radius: .25rem;
border-radius: .25rem;
font-family: inherit;
font-size: 1rem;
line-height: inherit;
min-width: 50%;
display: inline-block;
padding: 5px;
min-height: 100px;
-ms-user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
user-select: all;
}