JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="dial active"></div>
<div class="call chat wph-widget wph-widget-embed" data-wdgt-id="B4181B9B-B208-472B-B6E2-5B2ACDF4ED68">    
      <div class="wdgt-titlebar wdgt-expandable">
        <span class="wdgt-username">Alexandre Soares</span>
        <!--
        <div class="wdgt-titlebar-control wdgt-minimize">
          _
        </div>
      
        <div class="wdgt-titlebar-control wdgt-embed">
          □
        </div>
      
        <div class="wdgt-titlebar-control wdgt-pop">
          ↗
        </div>
        
        
        -->
        <button class="wdgt-titlebar-control wdgt-accept invitation-response visible">
          Accept
        </button>
          <button class="wdgt-titlebar-control wdgt-close invitation-response">End</button>
    </div><!-- end of .wdgt-titlebar -->
    
    <div class="wdgt-container">
        <div class="chat-media">
            <div class="media">
              <img class="picture" src="https://lh6.googleusercontent.com/-QcT-qJsJ_EM/T0QCfO1PtXI/AAAAAAAAKwo/HfrMrBfrdDE/s824/IMG_2421.jpg" />
            </div>
            
            <div class="status">
              ringing...
            </div>
            
            <div class="user-media">
             <img class="picture" src="https://lh6.googleusercontent.com/-QcT-qJsJ_EM/T0QCfO1PtXI/AAAAAAAAKwo/HfrMrBfrdDE/s824/IMG_2421.jpg" />
       </div>
        </div><!-- end of .chat-media -->
    </div><!-- end of .wdgt-container -->
</div><!-- end of .wph-widget -->

CSS

/*reset*/

body{
  font: 16px helveticaneue, helvetica, arial, sans-serif;
}

/**/

@-webkit-keyframes fitToBottom{
  0% { bottom: 0px; }
  65% { bottom: -90px;-webkit-animation-timing-function: ease-out; }
  85% { bottom: -74px; }
  100% { bottom: -80px; }
}

@-moz-keyframes fitToBottom{
  0% { bottom: 0px; }
  65% { bottom: -90px;-moz-animation-timing-function: ease-out; }
  85% { bottom: -74px; }
  100% { bottom: -80px; }
}

@-ms-keyframes fitToBottom{
  0% { bottom: 0px; }
  65% { bottom: -90px;-ms-animation-timing-function: ease-out; }
  85% { bottom: -74px; }
  100% { bottom: -80px; }
}

@-o-keyframes fitToBottom{
  0% { bottom: 0px; }
  65% { bottom: -90px;-o-animation-timing-function: ease-out; }
  85% { bottom: -74px; }
  100% { bottom: -80px; }
}

@keyframes fitToBottom{
  0% { bottom: 0px; }
  65% { bottom: -90px; animation-timing-function: ease-out; }
  85% { bottom: -74px; }
  100% { bottom: -80px; }
}

/*keyframes backgroundColorSwitch*/

@-webkit-keyframes backgroundColorSwitch{
  0% { background-color: #c9ff6d; -webkit-transform: scale(0.85)}
  50%{  background-color:#9fe030;}
  100% { background-color: #c9ff6d; -webkit-transform: scale(1.15);}
}

@-moz-keyframes backgroundColorSwitch{
  0% { background-color: #c9ff6d; -moz-transform: scale(0.85)}
  50%{  background-color:#9fe030;}
  100% { background-color: #c9ff6d; -moz-transform: scale(1.15);}
}

@-ms-keyframes backgroundColorSwitch{
  0% { background-color: #c9ff6d; -ms-transform: scale(0.85)}
  50%{  background-color:#9fe030;}
  100% { background-color: #c9ff6d; -ms-transform: scale(1.15);}
}

@-o-keyframes backgroundColorSwitch{
  0% { background-color: #c9ff6d; -o-transform: scale(0.85)}
  50%{  background-color:#9fe030;}
  100% { background-color: #c9ff6d; -o-transform: scale(1.15);}
}

@keyframes backgroundColorSwitch{
  0% { background-color: #c9ff6d; transform: scale(0.85)}
  50%{  background-color:#9fe030;}
  100% { background-color: #c9ff6d; transform:...

JavaScript

/*whisper - .call tab fixed at bottom*/