JSFiddle - React, Tailwind, and code Playground

by pdavis68

HTML

<div class="ticker_container">
<div class="ticker_panel stock_price_up" >
<span class="percent_change">+123.25%<br/></span>
<span class="ticker">AAPL<br/></span>
<span class="current_price">47.125<br/></span>
<span class="open_price">47.00<br/></span>
<span class="volume">142K<br/></span>
</div>
</div>

CSS

.stock_price_up {
  background-color: green;
}

.stock_price_down {
  background-color: red;
}

.ticker_panel{
  color: white;
  width:120px;
  height:60px;
  line-height: 60px;
  float: left;
  display: inline;
  margin: 4px;
  border: 0px;
  padding: 0px;
}

.ticker_container{
    width: 450px;
    height: 100px;
    overflow: auto;
}

.ticker {
  position: absolute;
  left: 17px;
  top: -6px;
  font: arial;
}

.current_price {
  position: absolute;
  left: 50px;
  top: 13px;
  font: arial;
  font-size: 22px;
}

.percent_change {
  position: absolute;
  left: 80px;
  top: -6px;
  font: arial;
  font-size: 12px;
}

.open_price {
  position: absolute;
  left: 15px;
  top: 33px;
  font: arial;
  font-size: 12px;
}

.volume {
  position: absolute;
  left: 100px;
  top: 33px;
  font: arial;
  font-size: 12px;
}