JSFiddle - React, Tailwind, and code Playground

by othomantegazza

HTML

<h1>Population</h1>
  
<p>
The cities in Italy with highest population.
</p>
  
<table>
<tbody id="pop">
  
</tbody>
</table>

CSS

h1 {
  color: Black;
}

.bar {
  background: #0373fc;
  background-clip: content-box;
  box-shadow: inset 0 0 0 2px black;
  display: block;
  height: 20px;
  padding: 2px;
  border-radius: 0px;
  transition: width 0.5s cubic-bezier(1, 0.01, 0, 1);
}

JavaScript

const pop = [
  {
    "town": "Rome",
    "pop": 2.761,
  },
  {
    "town": "Milan",
    "pop": 1.352,
  },
  {
    "town": "Naples",
    "pop": 0.914,
  },
]

var tbl = document.getElementById("pop")

pop.forEach((town) => {
	 let html = `<tr>
   								<td>${town.town}</td>
                  <td class="bar" style="width:${town.pop*100}px;"></td>
                  <td>Pop: ${town.pop*1000}K</td>
                </tr>`
   console.log(town)
   tbl.insertAdjacentHTML( 'beforeend', html )
  })