<div id="app" class="text-black antialiased">
  <div class="px-6 pt-8">
    <!-- picker -->
    <div class="flex">
      <!-- red -->
      <div class="w-8 h-8 flex items-center justify-center mr-2 rounded-full bg-red-500" @click="selectedColor = 'red'">
        <div class="w-4 h-4 rounded-full bg-white"
             v-if="selectedColor !== 'red'"></div>
      </div>
      <!-- orange -->
      <div class="w-8 h-8 flex items-center justify-center mr-2 rounded-full bg-orange-500" @click="selectedColor = 'orange'">
        <div class="w-4 h-4 rounded-full bg-white"
             v-if="selectedColor !== 'orange'"></div>
      </div>
      <!-- yellow -->
      <div class="w-8 h-8 flex items-center justify-center mr-2 rounded-full bg-yellow-500" @click="selectedColor = 'yellow'">
        <div class="w-4 h-4 rounded-full bg-white"
             v-if="selectedColor !== 'yellow'"></div>
      </div>
      <!-- green -->
      <div class="w-8 h-8 flex items-center justify-center mr-2 rounded-full bg-green-500" @click="selectedColor = 'green'">
        <div class="w-4 h-4 rounded-full bg-white"
             v-if="selectedColor !== 'green'"></div>
      </div>
      <!-- teal -->
      <div class="w-8 h-8 flex items-center justify-center mr-2 rounded-full bg-teal-500" @click="selectedColor = 'teal'">
        <div class="w-4 h-4 rounded-full bg-white"
             v-if="selectedColor !== 'teal'"></div>
      </div>
      <!-- blue -->
      <div class="w-8 h-8 flex items-center justify-center mr-2 rounded-full bg-blue-500" @click="selectedColor = 'blue'">
        <div class="w-4 h-4 rounded-full bg-white"
             v-if="selectedColor !== 'blue'"></div>
      </div>
    </div>
    <!-- preview -->
    <div class="mt-4">
      <div class="w-full h-64 bg-red-500 flex items-center justify-center text-white"
           v-if="selectedColor === 'red'">
        #F56565
      </div>
      <div class="w-full h-64 bg-orange-500 flex items-center justify-center text-white"
           v-if="selectedColor === 'orange'">
        #ED8936
      </div>
      <div class="w-full h-64 bg-yellow-500 flex items-center justify-center text-white"
           v-if="selectedColor === 'yellow'">
        #ECC94B
      </div>
      <div class="w-full h-64 bg-green-500 flex items-center justify-center text-white"
           v-if="selectedColor === 'green'">
        #48BB78
      </div>
      <div class="w-full h-64 bg-teal-500 flex items-center justify-center text-white"
           v-if="selectedColor === 'teal'">
        #38B2AC
      </div>
      <div class="w-full h-64 bg-blue-500 flex items-center justify-center text-white"
           v-if="selectedColor === 'blue'">
        #4299E1
      </div>
    </div>
  </div>
</div>

input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}

var app = new Vue({
  el: '#app',
  data: {
    selectedColor: 'red'
  },
  methods: {
    // functions go here
  }
})