JSFiddle - React, Tailwind, and code Playground

by janzikmund

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.1/cdn.js"></script>
<div x-data="{ var1: 0, var2: 0, var3:0, get var3() { return parseFloat(this.var3)} }">
    <input type="number" x-model.number="var1">
    + 10 = 
    <span x-text="var1 + 10"></span>    
    <hr>
    <input type="number" x-model="var2">
    + 10 = 
    <span x-text="parseFloat(var2) || 0 + 10"></span>    
    <hr>
    <input type="number" x-model="var3">
    + 10 = 
    <span x-text="(var3 || 0) + 10"></span>        
</div>