JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tab12" class="tab-12" onclick="init() " >
12
<div class="done-course">
done course
</div>
</div>
<div id="tab3" class="tab-3">
3
<div class="unfinished-course">
unfinished course
</div>
</div>
CSS
.tab-12 {
border-top: 1px solid rgb(222, 225, 226);
font-size: 34px;
font-family: "ProximaNova";
color: rgb(230, 115, 51);
font-weight: bold;
text-transform: uppercase;
text-align: center;
width: 100%;
height: 80px;
}
.done-course {
font-size: 12px;
font-family: "ProximaNova";
color: rgb(230, 115, 51);
text-transform: uppercase;
line-height: 1.5;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tab-3 {
width: 100%;
height: 80px;
font-size: 34px;
font-family: "ProximaNova";
color: rgb(149, 165, 166);
font-weight: bold;
text-transform: uppercase;
text-align: center;
background-color: #ecf0f1;
border-top: 1px solid #ecf0f1;
border-right: 1px solid #ecf0f1;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
}
.unfinished-course {
font-size: 12px;
font-family: "ProximaNova";
color: rgb(149, 165, 166);
text-transform: uppercase;
line-height: 1.5;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
JavaScript
function init() {
var tab12 = document.getElementById("tab12");
var tab3 = document.getElementById("tab3");
tab3.addEventListener("click", function(){
this.style.color = 'rgb(230, 115, 51)';
this.style.backgroundColor = 'rgb(255,255,255)';
tab12.style.color = 'rgb(149, 165, 166)';
tab12.style.backgroundColor = '#ecf0f1';
})
tab12.addEventListener("click", function(){
this.style.color = 'rgb(230, 115, 51)';
this.style.backgroundColor = 'rgb(255,255,255)';
tab3.style.color = 'rgb(149, 165, 166)';
tab3.style.backgroundColor = '#ecf0f1';
})
}