JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.bootstrapcdn.com"></script>
<div class="filter_main">
				<form action="#" class="filter_main_form">
  				<legend>Производитель</legend>
					<fieldset class="checkbox-list">
						<input id="male" type="checkbox" /><label for="male">Интерскол</label>
						<input id="male1" type="checkbox" /><label for="male1">Hitachi</label><br/>
						<input id="male2" type="checkbox" /><label for="male2">METABO</label>
						<input id="male3" type="checkbox" /><label for="male3">DeWalt</label><br/>
						<input id="male4" type="checkbox" /><label for="male4">Энергомаш</label>
						<input id="male5" type="checkbox" /><label for="male5">BOSCH</label><br/>
						<input id="male6" type="checkbox" /><label for="male6">Skil</label>
						<input id="male7" type="checkbox" /><label for="male7">AEG</label><br/>
						<input id="male8" type="checkbox" /><label for="male8">Hammer</label>
						<input id="male9" type="checkbox" /><label for="male9">Энкор</label>
					</fieldset>
				</form>				
			</div>

SCSS

.filter_main {
	float: left;
	background: #fff;
	/* height: 300px; */
	width: 240px;
	margin-left: -30px;
	padding: 35px 20px 0;
}
	.filter_main legend {
		color: #242424;
		text-transform: uppercase;
		font: 14px 'acrombold', sans-serif;
		margin-bottom: 10px
	}
	.filter_main fieldset {
		margin-bottom: 25px;
	}
		.filter_main label {
			color: rgba(83, 83, 83, .5);
			font: 14px 'acromregular', sans-serif;
		}
		.filter_main input {
			border:0;
			width: 80px;
			margin: 0 6px;
			color:#161616;
			font: 14px 'acromregular', sans-serif;
		}
		#slider-range,
		#slider-range-wattage,
		#slider-range-revolution {
			margin: 20px 0;
		}
		input[type="checkbox"] { 
		   position:absolute; 
		   left:-999em;
		}
		.checkbox-list {}
			.checkbox-list label {
				width: 120px;
				float: left;
				cursor: pointer;
			}
			.checkbox-list input {
				float:left;
			}
			.checkbox-list label:before { 
			   display:inline-block;
			   position:relative;
			   top:0.25em;
			   left:-2px; 
			   content:'';
			   width:24px;
			   height:24px;
			   /*background-image:url(../images/formelements.png);*/
			   background:#f3f3f3;
			}
			input[type="checkbox"] + label:before {
			   /*background-position: 0 -25px;*/         
			   background:#919191;
			}
			input[type="checkbox"]:checked + label:before {
			   /*background-position: 0 0;*/
			   background:f2c51b;
			}
			
		.filter_main .button {
			background: rgba(242, 197, 27, 1);
			color: rgba(29, 35, 40, .7);
			font: 12px 'acrombold', sans-serif;
			text-transform: uppercase;
			letter-spacing: 1px;
			width: 280px !important;
			border-radius: 0;
			padding: 0 !important;
			height: 52px;
			line-height: 52px;
			margin:0;
			z-index: 100;
			position: absolute;
			bottom: -50px;
			left: -30px; 
		}
		.filter_main .button:hover {					
			color: rgba(29, 35, 40, 1);
			background: rgba(242, 197, 27, .9);