JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <!-- 注意下面兩組 input 對應的都是 v-model="picked"  -->
  <div>
    <input type="radio" id="one" value="1" v-model="picked">
    <label for="one">One</label>
  </div>
  <div>
    <input type="radio" id="two" value="2" v-model="picked">
    <label for="two">Two</label>
  </div>

  <p>Picked: {{ picked }}</p>
</div>

CSS

body {
  padding: 1rem;
}

label {
  margin-left: 10px;
}

JavaScript

const vm = Vue.createApp({
  data () {
    return {
      picked: 1
    }
  }
}).mount('#app');