JSFiddle - React, Tailwind, and code Playground
HTML
<table id="weatherTable">
<tr id="date">
<td>Date</td>
</tr>
<tr id="temp-max-c">
<td>tempMaxCv</td>
</tr>
<tr id="temp-min-c">
<td>tempMinC</td>
</tr>
<tr id="temp-max-f">
<td>tempMaxF</td>
</tr>
<tr id="temp-min-f">
<td>tempMinF</td>
</tr>
</table>
CSS
td {
border: 1px solid #444;
padding: 5px;
}
#date {
background-color: #777;
color: #eee;
}
JavaScript
var response = {
"data": {
"current_condition": [{
"cloudcover": "25",
"humidity": "70",
"observation_time": "04:21 PM",
"precipMM": "0.3",
"pressure": "1007",
"temp_C": "30",
"temp_F": "86",
"visibility": "4",
"weatherCode": "113",
"weatherDesc": [{
"value": "Clear"}],
"weatherIconUrl": [{
"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0008_clear_sky_night.png"}],
"winddir16Point": "S",
"winddirDegree": "180",
"windspeedKmph": "7",
"windspeedMiles": "4"}],
"request": [{
"query": "Ahmedabad, India",
"type": "City"}],
"weather": [{
"date": "2012-09-18",
"precipMM": "2.1",
"tempMaxC": "32",
"tempMaxF": "89",
"tempMinC": "25",
"tempMinF": "76",
"weatherCode": "176",
"weatherDesc": [{
"value": "Patchy rain nearby"}],
"weatherIconUrl": [{
"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0009_light_rain_showers.png"}],
"winddir16Point": "SSW",
"winddirDegree": "203",
"winddirection": "SSW",
"windspeedKmph": "12",
"windspeedMiles": "8"},
{
"date": "2012-09-19",
"precipMM": "3.4",
"tempMaxC": "32",
"tempMaxF": "89",
"tempMinC": "25",
"tempMinF": "76",
"weatherCode": "176",
"weatherDesc": [{
"value": "Patchy rain nearby"}],
"weatherIconUrl": [{
"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0009_light_rain_showers.png"}],
"winddir16Point": "SW",
...