JSFiddle - React, Tailwind, and code Playground

HTML

<a onclick="onclickVhod();" id="idExid"class="popup_toggle">
<div class="circlephone" style="transform-origin: center;"></div>
<div class="circle-fill" style="transform-origin: center;"></div>
<div class="img-circle" style="transform-origin: center;">
<div class="img-circleblock" style="transform-origin: center;"></div></div>
</a>	

<span onclick="onclickExid()" id="idVhod" ><span id="ugcontcal"></span></span>


<script>
var idVhod = document.getElementById('idVhod');

function onclickVhod() {
  idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline';
  localStorage.setItem('hide', idVhod.style.display); // сохраняем значение в ключ hide
}

if(localStorage.getItem('hide') == 'inline') { // если значение ключа hide "inline"
  document.getElementById('idVhod').style.display = 'inline';
}

var idExid = document.getElementById('idExid');

function onclickExid() {
  idExid.style.display = (idExid.style.display == 'none') ? '' : 'none';
  localStorage.setItem('hide', idExid.style.display); // сохраняем значение в ключ hide
}

if(localStorage.getItem('hide') == 'none') { // если значение ключа hide "none"
  document.getElementById('idExid').style.display = 'none';
}




</script>

CSS

#idExid {
  display: inline; /* изначально  не скрыт */ 
}
#idVhod {
  display: none; /* изначально скрыт */ 
}
#idVhod{
    background: #29AEE3;
    z-index: 999997;
    width: 50px;
    height: 50px;
    bottom: 0;
    right: 0;
    position: fixed;
    opacity: 0.7;
    -webkit-border-top-left-radius: 50px;
    -moz-border-radius-topleft: 50px;
    border-top-left-radius: 50px;
}
#ugcontcal{
    background: url(/img/mini.png) no-repeat;
    bottom: 6px;
    right: 6px;
    position: absolute;
    width: 25px;
    height: 25px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

  .popup_toggle{bottom:25px;right:10px;position:fixed;z-index:999;}
.img-circle{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;}
.circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite...