JSFiddle - React, Tailwind, and code Playground

by webref

HTML

<div id="app">
  <h1 id="title">{{title}}</h1>
  <section id="result" v-bind:style="{textAlign: selectValue }">Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и
    тарелки.
  </section>
  <section id="value">
    <label>
      <input type="radio" name="value" value="left" v-on:click="value('left')" checked>left</label>
    <label>
      <input type="radio" name="value" value="center" v-on:click="value('center')">center</label>
    <label>
      <input type="radio" name="value" value="right" v-on:click="value('right')">right</label>
    <label>
      <input type="radio" name="value" value="justify" v-on:click="value('justify')">justify</label>
  </section>
  <section id="code"><pre>div {
  text-align: {{selectValue}};
}</pre></section>
</div>

CSS

section {
  margin-bottom: 20px;
  padding: 15px 15px 10px;
  border: 1px solid #e9e8e8;
  border-radius: 3px;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    title: 'text-align',
    selectValue: 'left'
  },
  methods: {
    value: function(newValue) {
      app.selectValue = newValue;
    }
  }
});