JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<label>ReadOnly</label>
<input type="text" readonly="readonly" value="text1">
<label>Standard Input</label>
<input type="text" value="text1">
<label>disabled</label>
<input type="text" disabled="disabled" value="text1">

CSS

label {
    display:block;
}
input[readonly] {
    background-color: rgb(235, 235, 228);
    color: rgb(84, 84, 84);
    border:1px solid grey;
}

JavaScript

$(document).ready(function () {
    $('input[readonly]').attr('tabindex', '-1');
});