JSFiddle - React, Tailwind, and code Playground

by andig2

HTML

<!-- weather -->
<div class="row">
    <div class="w-300">
        <canvas id="weather-icon" width="90" height="90"></canvas>
        <div id="weather-text">
            
                <div class="largeValue">19°</div>
                <div class="unit">Clear</div>
            
        </div>
    </div>
</div>

<!-- current values -->
<div id="generation" class="row">
    <div class="w-150">
        <h2>Solar generation</h2>
        <div id="generationNow" class="largeValue">
            3.5<span class="unit">kW</span>
        </div>
    </div><!--
  --><div class="w-150">
    <div id="generationToday">
        <h1 class="right">4.7<span class="unit">kWh today</span></h1>
    </div><!--
   --><div id="generationTotal">
    <h1 class="right">11593<span class="unit">kWh total</span></h1>
    </div>
    </div>
</div>

<div class="row">
    <div class="rickshaw_graph" id="chart"><svg height="200" width="300"></svg><div class="x_tick plain" style="left: 0px;"><div class="title">03:00</div></div><div class="x_tick plain" style="left: 42.8571px;"><div class="title">04:00</div></div><div class="x_tick plain" style="left: 85.7143px;"><div class="title">05:00</div></div><div class="x_tick plain" style="left: 128.571px;"><div class="title">06:00</div></div><div class="x_tick plain" style="left: 171.429px;"><div class="title">07:00</div></div><div class="x_tick plain" style="left: 214.286px;"><div class="title">08:00</div></div><div class="x_tick plain" style="left: 257.143px;"><div class="title">09:00</div></div></div>
</div>

<div class="row">
    <div id="perf"><svg height="40" width="300" class="bullet"><g transform="translate(40,5)"><rect x="0" height="20" width="260" class="range s0"></rect><rect x="0" height="20" width="208" class="range s1"></rect><rect x="0" height="20" width="173.33333333333331" class="range s2"></rect><rect y="6.666666666666667" x="0" height="6.666666666666667" width="201.7043007518797" class="measure s0"></rect><rect y="6.666666666666667" x="0"...

CSS

/* general settings */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
body {
  font-family: ArialNarrow, sans-serif, Arial, Helvetica;
  font-weight: normal;
  font-style: normal;
}

/* helper classes */
.hidden {
  display: none; }
.inline-block {
  display: inline-block; }
.right {
  text-align: right; }
.center {
  text-align: center; 
  margin: 0 auto; }
.nowrap {
  white-space: nowrap; }

/* bullet chart (power ratio) formatting */
.bullet { font: 10px; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .tick { font-size: 10px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: lightsteelblue; }
.bullet .measure.s1 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: rgb(68, 68, 68); font-size: 10px; }

/* debug classes */
/*    div {
  border: 1px dashed red!important;
}
h1, h2 {
  border: 1px solid green!important;
}*/

/* special objects */
#weather-icon {
  display: block;
  float: left;
  margin: 0 10px 20px 0;
}
#chart {
  margin-bottom: 10px;
  max-width: 300px;
  height: 200px;
  overflow: hidden;
}

/* page formatting */
.row {
  width: 100%;
  margin: 0px auto;
  max-width: 300px; }
  /* hide numbers until data available */
  .row.nowrap {
    display: none;
  }

.w-300, .w-150, .w-100 {
  overflow: visible; 
  display: inline-block; }
  .w-300 {
    width: 300px !important; }
  .w-150 {
    width: 150px !important; }
  .w-100 {
    width: 100px !important; }

/* styles */
h1, h2 {
  font-family: AvenirNextCondensed, "Arial Narrow", Arial, Helvetica;
}
h1 {
  font-weight: bold;
  font-style: normal;
  font-size: 38.25px;
  margin: 0;
  line-height: 1em; 
  direction: rtl; /* overflow to left */
}
h2 {
  margin: 3px 0 3px 0;
  color: #444; 
}
h2, .unit {
  font-size: 22px;
  font-weight: normal;...