JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<div class="endzone"><span class="end">FUNDING ZONE</span></div>
<div id="field">
    <div class="leftvertical"></div>
    <div class="rightvertical"></div>
    <span class="line">.......................................</span>
 <span class="linea">......10.........................10.....</span>
 <span class="line">.......20.........................20...</span>
 <span class="line">......30..........................30.....</span>
 <span class="line">.....40.........................40.....</span>
  <span class="line">.....50.........................50......</span>
    <span class="qb"></span>
    <span class="line">......40.........................40.....</span>
     <span class="line">.....30..........................30.....</span>
    <span class="line">.....20..........................20.....</span>
    <span class="line">.....10.........................10......</span>
    <span class="line">....................................</span>

</div>
<div class="endzone"><span class="end">FUNDING ZONE</span></div>

CSS

#field {
    background-color: #0c4d0f;
    width: 180px;
    height: 410px;
    position: relative;
    
}

.endzone {
    width: 180px;
    height: 30px;
    background-color: #0c4d0f;
    text-align: centre;
    position: relative;
    
   
    
   
}
.line {
    color: white; 
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0.55,
    
}
.linea{
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    display:block;
    
}

.qb{
position: absolute;
width: 50px;
height: 50px;
    background-color: #fff;
    left: 60px;
    top: 210px
}

.end {
 left: 25px;
 top: 10px;
 position: absolute;
 font-size: 20px;
}

.leftvertical {
    width:1px;
    height:410px;
    background-color:#fff;
    opacity: .55;
    
    position: absolute;
    left:50px;
}

.rightvertical {
    width:1px;
    height:410px;
    background-color:#fff;
    opacity: .55;
    
    position: absolute;
    right:50px;
}

JavaScript

$('.qb').click(function() {
  $('.qb').animate({
    
    top: '-=42',
    
  }, 5000, function() {
    // Animation complete.
  });
});