DvAlonso

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<div class="bg-white mx-auto my-auto p-6">
  <div x-data="app()" x-init="[initColor()]">
    <div>
      <label for="color-picker" class="block mb-1 font-semibold">Select a color</label>
      <div class="flex flex-row relative">
        <input id="color-picker" class="border border-gray-400 p-2 rounded-lg" x-model="currentColor">
        <div @click="isOpen = !isOpen" class="cursor-pointer rounded-full ml-3 my-auto h-10 w-10 flex" :class="`bg-${currentColor}`" >
          <svg xmlns="http://www.w3.org/2000/svg" :class="`${iconColor}`" class="h-6 w-6 mx-auto my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

davidpiesse

// https://davidpiesse.github.io/tailwind-md-colours/
//
//Notes
//
//All colours are generated from Material Design Docs
//Colours have a base, a set of shades (50-900) accent colours
//In addition a companion set of contrast colours are included for colouring text / icons
// Example usage
// class="w-full bg-red-600 text-red-600-constrast"