JSFiddle - React, Tailwind, and code Playground
by zxzc0
JavaScript
<!DOCTYPE html><html lang=en><meta charset=utf-8><meta content="IE=edge,chrome=1"http-equiv=X-UA-Comaptible><meta content="width=device-width,initial-scale=1"name=viewport><link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=latin-ext"rel=stylesheet><link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600&display=swap&subset=latin-ext"rel=stylesheet><link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=latin-ext"rel=stylesheet><link rel="stylesheet" href="style.css" type="text/css" />
<title>#</title>
<meta name="description" content="#">
<body>
<div id="fc-co">
<div id="fc-nav"><a href="deck?d=43125980" id="exit"><img height="18" src="img/xx.png" width="18"></a>
<div id="progress-bar">
<div id="bar"></div>
</div>
<div id="counter-co">
<div id="counter2">0</div> / <div id="counter3">31</div>
</div>
</div>
<div id="fc-main">
<div id="fc-top">
<div id="fc-counter">0</div>
</div>
<div id="fc-mid">
<div id="word1"></div>
<div id="word2"></div>
<div id="restart"><span id="restart-text">Reset</span></div>
</div>
<div id="fc-bot">
<div id="btx" class="bt">n</div>
<div id="bts" class="bt">?</div>
<div id="btv" class="bt">y</div>
</div>
</div>
<style>
#fc-co {
max-width: 1000px;
text-align: center;
margin: 0 auto;
padding: 0 10%;
}
#fc-nav {
display: flex;
align-items: center;
text-align: center;
margin-top: 50px;
padding: 0 5%
}
#exit {
background-color: #fff;
border-radius: 50%;
padding: 15px;
box-shadow: 0 1px 2px 0 rgba(37, 65, 120, .06), 0 2px 18px 0 rgba(29, 58, 125, .05);
cursor: pointer;
justify-content: center;
align-items: center;
display: flex
}
#exit>a>img{
transition: all 0.5s ease;
}
#exit>a>img:hover{
background-color: red;
transform: rotate(360deg);
}
#progress-bar {
width: 85%;
...