JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<div class="content"> 
<nav>
    <div class="teal nav-wrapper">
      <a href="#!" class="brand-logo">All in</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="tiny mdi-navigation-menu"></i></a>
      <ul class="side-nav" id="mobile-demo" style="overflow: hidden">
          <li style="margin: 0px; padding: 0px; line-height: 0px">
              <img style="margin: 0px; padding: 0px; line-height: 0px" class="responsive-img" src="http://bit.ly/1GFUhHM"/>
              <span class="socials">
                  <img style="width: 30px" class="soc circle z-depth-1" src="http://bit.ly/1L8gDT7"/>
                  <img style="width: 30px" class="soc circle z-depth-1" src="http://bit.ly/1L8humX"/>
                  <img style="width: 30px" class="soc circle z-depth-1" src="http://bit.ly/1JRx58t"/>
                  <img style="width: 30px" class="soc circle z-depth-1" src="http://bit.ly/1IDtsS2"/>
              </span>
          </li>
          <li>
              <i style="color: rgba(0, 0, 0, 0.87)" class="left mdi-av-mic"></i>
              <a href="#test1">Запись</a>
          </li>
          <li>
              <i style="color: rgba(0, 0, 0, 0.87)" class="left mdi-av-my-library-music"></i>
              <a href="#test2" id='manageMusic' >Управление записями</a>
          </li>
          <li>
              <i style="color: rgba(0, 0, 0, 0.87)" class="left mdi-action-settings"></i>
              <a href="#test3">Настройки</a>
          </li>
      </ul>
    </div>
  </nav>
    
    <div id="test1" class="page">
        <div class="flip-card flip-y-inverse" id="flip-panel" style="width:100px; height:100px">
		    <div class="flip-card-content">
			    <div class="flip-card-side">
                    <button class="record...

CSS

body, html {
    height: 100%;
    overflow: hidden;
    font-family: "Roboto", sans-serif;
}

nav {
    position: absolute;
    top: 0px;
}

.content {
    height: 100%;
}

.page {
    border: 1px solid red;
}

.socials {
    position: absolute;
    margin-top: -40px;
    margin-left: 5px;
}

.soc{
    margin-left: 5px;
}

.flip-card {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    top: 50%;
    -webkit-perspective: 10000px;
    -moz-perspective: 10000px;
    -o-perspective: 10000px;
    perspective: 10000px;
    transform-origin: top center;
}

.flip-card-content {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.2s ease-in-out;
    -o-transform-style: preserve-3d;
    -o-transition: all 0.2s ease-in-out;
    transform-style: preserve-3d;
    transition: all 0.2s ease-in-out;
     
}

.flip-card.flip-x.flipped .flip-card-content,
.flip-card.flip-x .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    transform-origin: top center;
}

.flip-card.flip-x-inverse.flipped .flip-card-content,
.flip-card.flip-x-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    transform-origin: top center;
}

.flip-card.flip-y.flipped .flip-card-content,
.flip-card.flip-y .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transform-origin: top center;
}

.flip-card.flip-y-inverse.flipped .flip-card-content,
.flip-card.flip-y-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform:...

JavaScript

var recorded = false;
var millisec=0;
var time;

$( document ).ready(function(){
    $(".button-collapse").sideNav({
        closeOnClick: true
    });
    var navHeight = $(".nav-wrapper").height();
    var bodyHeight = $(document.body).height();
    $(".page").css("padding-top", navHeight);
    $(".page").height(bodyHeight - navHeight);
    $(".preloader-wrapper").css("top", bodyHeight/2-$(".preloader-wrapper").height());
    $('.modal-trigger').leanModal();
})

function RecordClick (record){
    $('#flip-panel').toggleClass('flipped');
    
    if (record){
        Materialize.toast('Претворяюсь что записываю', 2000);
        StartTimer();
    } else {
        Materialize.toast('Перестал претворяться', 2000);
        StopTimer();
    }
}

var timer = 0;
var hour = 0;
var minute = 0;
var second = 0;
function StartTimer(){
    timer = 0;
    document.getElementById("timer").innerHTML = "00:00:00";
time = setInterval(function(){
  ++timer;
  hour   = Math.floor(timer / 3600);
  minute = Math.floor((timer - hour * 3600) / 60);
  second = timer - hour * 3600 - minute * 60;
  if (hour < 10) hour = '0' + hour;
  if (minute < 10) minute = '0' + minute;
  if (second < 10) second = '0' + second;
    document.getElementById("timer").innerHTML = hour + ':' + minute + ':' + second;
}, 1000);
    
}

function StopTimer(){
    clearInterval(time);
}

var manageLink = document.getElementById("manageMusic");
manageLink.addEventListener("click", function(){
    var musicList = document.getElementById("musicList");
    var loading = document.getElementById("loading");
    musicList.style.display = "none";
    loading.style.display = "block";
    Materialize.toast('Претворяюсь что загружаю музыку', 2000);
    setTimeout(function(){
        $("#musicList").show();
        $("#loading").fadeOut();
    }, 3000);
}, false);