JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div id="ck_phone_widget" class="callkeeper_phonewidget ck_visible ck_inactive"> <div class="callkeeper_circle1"></div> <div class="callkeeper_circle2"></div> <div class="callkeeper_circle3"></div> <div class="callkeeper_circle4"></div> <div class="callkeeper_img_circle"></div></div>

CSS

.callkeeper_phonewidget{
  position:fixed !important;
  left:0%;
  top:0px;
  display: none;
  background-color:transparent;
  width:200px;
  height:200px;
  cursor:pointer;
  z-index:200000!important;
  opacity:.8
}

.callkeeper_phonewidget.ck_visible { display: block; }

.callkeeper_circle1, .callkeeper_circle2 {
  width:130px;
  height:130px;
  top:35px;
  position:absolute;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border-right:2px solid #00BFFF;
  border-color:#00BFFF;
  opacity:.6;
  -webkit-animation:callkeeper_circle-anim 2.2s infinite linear!important;
  -moz-animation:callkeeper_circle-anim 2.2s infinite linear!important;
  -ms-animation:callkeeper_circle-anim 2.2s infinite linear!important;
  -o-animation:callkeeper_circle-anim 2.2s infinite linear!important;
  animation:callkeeper_circle-anim 2.2s infinite linear!important;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s
}

.callkeeper_circle3, .callkeeper_circle4{
  width:130px;
  height:130px;
  top:35px;
  position:absolute;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border-left:2px solid #00BFFF;
  border-color:#00BFFF;
  opacity:.6;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s
}

.callkeeper_phonewidget.ck_active { opacity:1 }

.callkeeper_phonewidget.ck_inactive .callkeeper_circle1, .callkeeper_phonewidget.ck_inactive .callkeeper_circle2, .callkeeper_phonewidget.ck_inactive .callkeeper_circle3, .callkeeper_phonewidget.ck_inactive .callkeeper_circle4
{
  -webkit-animation:callkeeper_circle-anim 2.2s infinite linear!important;
  -moz-animation:callkeeper_circle-anim 2.2s infinite linear!important;
  -ms-animation:callkeeper_circle-anim 2.2s infinite linear!important;
  -o-animation:callkeeper_circle-anim 2.2s infinite linear!important;
  animation:callkeeper_circle-anim 2.2s infinite...

JavaScript

$('.callkeeper_phonewidget').hover(function(){
		$(this).toggleClass('ck_green ck_active');
	});