JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <header>
    <div class="title">
      <h1>CitiPix</h1>
      <p>Your Cities, Your Pix</p>
    </div>
  </header>

  <body>
    <form>
      <select id="city-type">
        <option>Select a City</option>
      </select>
    </form>
  </body>
</html>

CSS

.NYC {
  background: yellow;
}

.SYD {
  background: pink;
}

JavaScript

$(document).ready(function() {
  var places = ['NYC', 'SYD']
  for (i = 0; i < places.length; i++) {
    $('select').append('<option value="' + places[i] + '">' + places[i] + '</option>')
  }
  
  $('select').on('change', function() {
    $('body').attr("class", this.value)
  })
})