#app

*
  box-sizing border-box

body
  margin 0
  padding 0

#app
  align-items center
  display flex
  flex-direction column
  justify-content center
  min-height 100vh
  font-family 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
  background #ee786e

select
  cursor pointer
  font-size 1.5rem

const { React, ReactDOM } = window
const { useState, Fragment } = React
const { render } = ReactDOM
const rootNode = document.getElementById('app')

const colors = {
  Sea: '#a2ccb6',
  Sand: '#fceeb5',
  Peach: '#ee786e',
}


const App = () => {
  const [color, setColor] = useState(colors.Sea)
  return (
    <Fragment>
      <select value={color} onChange={e => setColor(e.target.value)}>
        {Object.entries(colors).map(c => (
          <option value={c[1]}>{c[0]}</option>
        ))}
      </select>
      <h2>{`Hex: ${color}`}</h2>
    </Fragment>
  )
}

ReactDOM.render(<App />, rootNode)