JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<div class="icon on">
    <div class="circle"> <span class="flag-name"> KVI  </span>
        </div>
</div>
<br /><br /><br />
<div class="icon off">
    <div class="circle"> <span class="flag-name"> KVI  </span>
        </div>
</div>

CSS

.circle {
    position:relative;
	border: 10px solid yellow;
	border-radius: 50%;
	width: 200px;
	height: 200px;
	z-index: -10;
    margin-left:75px;
    
	-webkit-transition: background-color .5s ease-in-out;
	-moz-transition: background-color .5s ease-in-out;
	-o-transition: background-color .5s ease-in-out;
	-ms-transition: background-color .5s ease-in-out;
	transition: background-color .5s ease-in-out;
    
        box-shadow: 0 0 10px rgba(255,255,255,1),
                 0 0 20px rgba(255,255,255,1), 
                 0 0 30px rgba(255,255,255,1), 
                 0 0 10px yellow , 0 0 20px yellow, 
                 0 0 20px yellow , 0 0 40px yellow;
}
.flag-name{
    position:absolute;
    width:180px;
    height:100px;
    line-height:100px;
    padding-left:60px;
    top:50px;
    font-size:100px;
    background-color: white;
    color:yellow;
    margin-left: -40px;
    padding-right: 50px;
    font-family: Open Sans,FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
    text-shadow: 0 0 10px rgba(255,255,255,1),
                 0 0 20px rgba(255,255,255,1), 
                 0 0 30px rgba(255,255,255,1), 
                 0 0 10px #FFFF80 , 0 0 20px #FFFF80, 
                 0 0 20px #FFFF80 , 0 0 40px #FFFF80;
}
.off{
    opacity: 0.1;
}