Javascript Color Picker - React Js

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

<body>
    <div id="app">
      <div class="color-picker">
        <h3>Vue Js Color Picker Example</h3>
        <p>Selected Color: {{selectedColor}}</p>
        <div
          class="color-preview"
          :style="{ backgroundColor: selectedColor }"
        ></div>
        <input type="color" v-model="selectedColor" @input="updateColor" />
      </div>
    </div>

<style>

.color-picker {
        display: flex;
        align-items: center;
        flex-direction: column;
      }

.color-preview {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin:10px;
      }

</style>
  </body>
</html>