JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
    <input type="checkbox" id="checkbox"/>
</div>

<div class="checkbox-tools">
   
      showing 
	  
</div>

CSS

.checkbox-tools
{
	background-color: #CCC;
	height: 120px;
	width: 1200px;
	border: 1px solid #333;
	position: absolute;
	z-index: 100;
	top: -450px;
	padding: 0;
	margin: 0;
	left: 0px;
	
}

JavaScript

$(':checkbox').change(function() {
    // use the :checked selector to find any that are checked
    if ($(':checkbox:checked').length > 0) {
		
        $(".checkbox-tools").animate({top: '200px'});
		
    } else {
		
        $('.checkbox-tools').animate({top: '-450px'});
    }
 });