JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="case">
   

<div id="bolt">
    <span class="bpart1"></span>
    <span class="bpart2"></span>
    <span class="bpart3"></span>
</div>
     <div class="level"></div>
    <div class="contact"></div>    
</div>

CSS

* {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.case {
    width:200px;
    border:4px solid black;
    position:relative;
    top:30px;
    left:30px;
    background:white;
}
.level {
    background:red;
    height:55px;
    width:5px;
}
.contact {
    height:40px;
    width:5px;
    float:right;
    position: relative;
    bottom:47px;
    right:-6px;
    background:black;
}
.bpart1, .bpart2, .bpart3 {
    width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	
	border-bottom: 10px solid yellow;
    position:relative;
    z-index:3;
}
.bpart2{position:relative;bottom:-3px;right:12px;z-index:2;}
.bpart3{position:relative;bottom:-6px;right:24px;z-index:1;}
.case:hover .level {
    width:100%;
    background:green;
}
#bolt {
    width:0;
    height:50px;
   position:absolute;
    top:2px;
    left:205px;
    transform:rotate(-10deg);
-ms-transform:rotate(-10deg); /* IE 9 */
-moz-transform:rotate(-10deg); /* Firefox */
-webkit-transform:rotate(-10deg); /* Safari and Chrome */
-o-transform:rotate(-10deg); /* Opera */
    overflow:hidden;
}
.case:hover #bolt {width:40px;}
.case:hover { transform:rotate(-10deg);
-ms-transform:rotate(-10deg); /* IE 9 */
-moz-transform:rotate(-10deg); /* Firefox */
-webkit-transform:rotate(-10deg); /* Safari and Chrome */
-o-transform:rotate(-10deg); /* Opera */}