JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="box">
        <div class="box-header">
            Contactar o anunciante
        </div>

        <div class="box-body">
            <ul>
                <li class="menu_item harken-call harken-is-open" style=
                "cursor: pointer; border-radius: 4px;">
                    <div class="">
                        <span>class="icon sprite_vi_icn_phone"&gt;</span> Ligar
                        Grátis (CustoJusto)
                    </div>

                    <div class="harken-">
                        <p class="harken-flashInstructions">As chamadas
                        Custojusto utilizam Adobe Flash. Na caixa em baixo,
                        clique em <span>allow</span>, <span>remember</span> e
                        <span>close</span> na ordem descrita.</p>

                        <div class="harken-flash"></div><button class=
                        "harken-controlBtn harken-callBtn harken-is-inactive">Ligar</button>

                        <div class="harken-callingText harken-is-inactive">
                            a ligar<span class=
                            "harken-dot">.</span><span class="harken-dot">.</span><span class="harken-dot">.</span>
                        </div>

                        <div class="harken-timer harken-is-inactive">
                            00:01
                        </div><button class=
                        "harken-controlBtn harken-endBtn harken-is-inactive">Terminar</button>
                    </div>
                </li>
            </ul>
        </div>

        <div class="harken-suggestions">
            <p>Sugestões de chamada</p>

            <ul>
                <li><span>Importante:</span> Certifique-se que o seu som e
                microfone estão ligados</li>
            </ul>
        </div>
    </div>

CSS

body {
    background: #ffffed;
    font-family: Arial,Tahoma,Helvetica,sans-serif;
    font-size: 14px;
    color: #727373;
}

.box {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 20px auto;
}

.box-header {
    font-family: Arial,Tahoma,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 1px #3F5983;
    border-bottom: 1px solid #4A75A2;
    box-shadow: inset 0 -1px 0 #5b9de3;
    padding: 13px 0 13px 17px;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,#5b9de3),color-stop(1,#4a74a2));
    background-color: #5b9de3;
    border-top-left-radius: 5px 5px 0 0;
    color: #fff;
    display: block;
}

.box-body {
    padding: 10px;
    background: #fff;
    border-radius: 0 0 5px 5px;
}

.harken-call {
    cursor: pointer;
}

.harken-call.harken-is-open {
    background: background: rgba(226, 226, 226, 0);
}

.harken-call.harken-is-closed {
    background: rgb(226, 226, 226);
}

.harken-controlBtn {
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  border: 1px solid #ae5812;
  padding: 4px 0 6px 4px;
  margin: 0 auto;
  cursor: pointer;
  width: 95%;
  color: #fff;
  font-family: arial;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 -1px 0 #b03434;
  display: block;
}

.harken-controlBtn:active {
  box-shadow: 0 0 0 #ccc;
}

.harken-callBtn {
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,#ed805c),color-stop(1,#e15a25));
}

.harken-callBtn:hover,
.harken-callBtn:active {
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,#e15a25),color-stop(1,#ed805c));
}

.harken-endBtn.harken-is-active {
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,rgb(237, 92, 92)),color-stop(1,rgb(225, 37, 37)));
}

.harken-endBtn.harken-is-active:hover,
.harken-endBtn.harken-is-active:active {
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,rgb(225, 37,...

JavaScript

var $li = $('.harken-call'),
    $call_btn = $li.find('.harken-callBtn'),
    $calling_text = $li.find('.harken-callingText'),
    $timer = $li.find('.harken-timer'),
    $endBtn = $li.find('.harken-endBtn');

$li.on('click', function () {
    $call_btn.addClass('is-active').removeClass('is-inactive');
});

$call_btn.on('click', function () {
    $call_btn.addClass('is-inactive').removeClass('is-active');
    $calling_text.addClass('is-active').removeClass('is-inactive').text('a ligar...');
    $endBtn.addClass('is-active').removeClass('is-inactive').text('Cancelar');
});

function onAnswer() {
    $calling_text.text('conectado');
    $timer.addClass('is-active').removeClass('is-inactive').startClock();
    $endBtn.text('Terminar');
}

$endBtn.on('click', function () {
    $calling_text.text('Terminado');
    $timer.endClock();

    setTimeout(function () {

    }, 500);
});