JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<div id= "box"></div>

<h3>
Consumption
</h3>
<table class="legend">
<tr><td style='background:#ACBD5F'>Lowest</td></tr>
<tr><td style='background:#FFE066'></td></tr>
<tr><td style='background:#E67300'></td></tr>
<tr><td style='background:#CC0000'>Highest</td></tr>
</table>

CSS

.heatmap tbody{
   display:flex;
 }
/* table tr th,table tr td{
   border: 1px solid;
   border-collapse: collapse;
 } */
 .heatmap th{
   background: #5bb2ed;
   padding: 6px;
 }
 .heatmap td{
   padding: 6px 12px;
 }
 .heatmap tbody{
   border: 1px solid;
   border-collapse: collapse;
 }
 .heatmap tr{
   display:flex;
   flex-direction:column;
 }
 
 .legend {
    border: 1px solid;
   border-collapse: collapse;
 }
 
 .legend tr td{
   width: 100px;
   height: 24px;
   text-align: center;
 }

JavaScript

var rows = [{
    name: "John",
    age: 20,
    email: "[email protected]"
}, {
    name: "Jack",
    age: 50,
    email: "[email protected]"
}, {
    name: "Son",
    age: 45,
    email: "[email protected]"
}];


let data = [
                {
                    "date": "2023-05-01",
                    "colorCode": "#FFE066",
                    "kwh": 168.9790363190025
                },
                {
                    "date": "2023-05-01",
                    "colorCode": "#CC0000",
                    "kwh": 235.91996571300922
                },
                {
                    "date": "2023-05-01",
                    "colorCode": "#CC0000",
                    "kwh": 218.56170827798545
                },
                {
                    "date": "2023-05-01",
                    "colorCode": "#E67300",
                    "kwh": 210.47536878201367
                },
                {
                    "date": "2023-05-01",
                    "colorCode": "#E67300",
                    "kwh": 202.75815748099984
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#ACBD5F",
                    "kwh": 78.52080913498997
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#ACBD5F",
                    "kwh": 71.6455621330142
                },
                
                {
                    "date": "2023-05-02",
                    "colorCode": "#CC0000",
                    "kwh": 213.01680551099776
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#CC0000",
                    "kwh": 230.08759201598167
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#E67300",
                    "kwh": 201.6210455890298
                },
                {
                    "date": "2023-05-03",
             ...