JSFiddle - React, Tailwind, and code Playground

by imtheman

HTML

<div class="container">
        <div class="attendance">
            <p class="title">ATTENDANCE</p>
            <div class="attendance-bar">                
                <div class="attendance-level">
                    <div class="bar-1"></div>
                    <div class="bar-2"></div>
                    <div class="bar-3"></div>
                    <div class="bar-4"></div>
                    <div class="bar-5"></div>
                    <div class="bar-6"></div>
                    <div class="bar-7"></div>
                    <div class="bar-8"></div>
                    <div class="bar-9"></div>
                </div>
                <div class="attendance-cage-css"></div>
            </div>
        </div>
    </div>
<div id="changeatt" style="top:50px; left: 200px; position: absolute">Click me</div>

CSS

.container{
    width:100px;
    height:350px;
    position: absolute;
}

.attendance{
	width:90%;
    float:left;
	background-color:#1f1f1f;
	margin:7px 5% 5px 5%;
	padding-bottom:10px;
	border-style:solid;
	border-color: #111111 #4e4e4e #4e4e4e #111111;
	border-width:2px;
}

.attendance .title{
    font-family:"Arial";
	color:white;
	font-size:9pt;
    font-weight:bold;
	text-align:center;
	padding:15px 0px 5px 0px;
}

.attendance-bar{
    float:left;
	width:90%;
	margin:0px 5% 0px 5%;
	height:260px;
	background-color:#2f2f2f;
}

.attendance-cage-css{
	width:80px;
    float:left;
    background-color:#6ae719;
    height:5px;
    position: absolute;
    bottom: 20px;
    z-index: 1;
}

.bar-1,.bar-2,.bar-3,.bar-4,.bar-5,.bar-6,.bar-7,.bar-8,.bar-9{
	float:left;
	width:100%;
	background-color:#1f1f1f;
	height:10px;
    z-index: 9999;
}

.bar-1{
	margin-bottom:14px;
}

.bar-2{
	margin-bottom:15px;
}

.bar-3{
	margin-bottom:16px;
}

.bar-4{
	margin-bottom:17px;
}

.bar-5{
	margin-bottom:18px;
}

.bar-6{
	margin-bottom:19px;
}

.bar-7{
	margin-bottom:20px;
}

.bar-8{
	margin-bottom:24px;
}

.bar-9{
	margin-bottom:22px;
}

.attendance-level{
	float:left;
    height:100px;
	width:80px;
    z-index: 9999;
    position: absolute;
    top:60px;
}

JavaScript

$('#changeatt').click(function(){
    $('.attendance-cage-css').css('height', '200px');
});