JSFiddle - React, Tailwind, and code Playground

by aasthatuteja

HTML

<div class="bin-area" style="position: absolute; width:242px; height:130px; top:170px; left:256px">
    <div class="bin" data-binid="5" data-cols="9" data-rows="5">
        <div class="number">S7</div>
        <input class="floatLeft styled" id="7" name="checkbox7" type="checkbox">
        <div class="type">9x5 Storage Bin</div>
        <div class="description">Est. Capacity: 121 pkgs</div>
    </div>
</div>

CSS

.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}

.bin-area {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-width: 1px;
	border-style: dotted;
	border-color: #fff;
	overflow: hidden;
	position: absolute;
	
}
.bin-area-hover {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-width: 1px;
	border-style: dotted;
	border-color: #fff;
	overflow: hidden;
	position: absolute;
	background-color: #ff0000 !important;
}
.bin {
	background-color: #f2f2f2;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: #bcbcbc;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.number {
	background-color: #888;
	font-family: 'Segoe UI Bold', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	height: 20px;
	color: #fff;
	text-shadow: 1px 1px 0px #444;
	border-radius: 0 0 10px 0;
	width: 30px;
}
.bin-area .number {
	font-size: 12px;
	line-height: 20px;
	height: 20px;
	width: 25px;
}
.bin-area .type {
	font-size: 15px;
	font-family: 'Segoe UI Semiold', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	/*text-align: center;*/
    margin-left: 25px;
}

JavaScript

$(document).ready(function() {
        $('.bin-area').hover(
            alert();
          function(){ $(this).toggleClass('bin-area-hover'); }
        );
    });