JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
<div x-data="{disableSubmit: true, inputText: null}">
    <input x-model="inputText" x-on:input="[(inputText.length != 0) ? disableSubmit = false : disableSubmit = true]">
    <button x-bind:disabled="disableSubmit">submit</button>
</div>

CSS

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}