JSFiddle - React, Tailwind, and code Playground

by aadil hasan

HTML

<script src="https://cdn.jsdelivr.net/npm/mini-js/build/mini.min.js"></script>
<h1>
 Mini JS m-class exapmle
</h1>
<hr>
</h1>
<div id="app1">
<h2 m-literal:class="{'green': class_green}">
  basic example
</h2>
<br>
<h2 m-literal:class="[ {'red': class_red}, {'border_bottom': border_bottom}]">
  array of classes
</h2>
  <br>
  <h2 m-literal:class="class_green ? 'green' : 'red'"> use of ternary operator </h2>
  <br>
  <br>
  <br>
  
  <button m-on:click="toggle_txt_visibility()">
    toggle class red
  </button>
 

</div>

CSS

.red {
  color: red;
}

.green{
  color: green
}

.border_bottom{
  border-bottom: 2px solid black;
}

JavaScript

var app = new Mini({
  el: '#app1',
  data: {

    class_red: true,
    class_green: true,
    border_bottom: true

  },
  methods: {

    toggle_txt_visibility: function() {

      this.class_green = !this.class_green;
      this.border_bottom = !this.border_bottom;

    }


  }
})