JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<p><strong>Fasit:</strong></p>
<div style="display: flex; flex-direction: column; justify-content: center; max-width: 70%; min-width: 50%; border-radius: 7px; border: 1px solid #ccc; padding: 0.2em; overflow: hidden;">
  <div style="background: #353535; color: #c1c1c1; font-family: areal, sans-serif; border: solid 1px black; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; padding: 1em;">
    <div style="color: skyblue;">select</div>
    <div style="margin-left: 3em; display: flex; flex-direction: row;">
      <div style="color: skyblue;">avg</div>
      (
      <div style="color: white;">city.population</div>
      )&nbsp;
      <div style="color: skyblue;">as</div>
      &nbsp;
      <div style="color: white;">Average_City_Population</div>
      ,<span style="color: #c1c1c1; font-size: 1rem;">&nbsp;</span>
    </div>
    <div style="margin-left: 3em; display: flex; flex-direction: row;">
      <div style="color: wheat;">sum</div>
      (
      <div style="color: white;">city.population</div>
      )&nbsp;
      <div style="color: skyblue;">as</div>
      &nbsp;
      <div style="color: white;">Combined_City_Population</div>
      ,<span style="font-size: 1rem;"> </span>
    </div>
    <div style="margin-left: 3em; display: flex; flex-direction: row;">
      <div style="color: wheat;">count</div>
      (
      <div style="color: white;">city.CountryCode</div>
      )&nbsp;
      <div style="color: skyblue;">as</div>
      &nbsp;
      <div style="color: white;">Total_Cities</div>
      ,<span style="font-size: 1rem;"> </span>
    </div>
    <div style="margin-left: 3em; display: flex; flex-direction: row;">
      <div style="color: white;">city.CountryCode</div>
      &nbsp;
      <div style="color: skyblue;">as</div>
      &nbsp;
      <div style="color: white;">Country_Code<span style="color: #c1c1c1; font-size: 1rem;">&nbsp;</span></div>
    </div>
    <div style="color: skyblue;">from<span style="color: #c1c1c1; font-size:...

JavaScript

t