JSFiddle - React, Tailwind, and code Playground

HTML

<div id="formContent">     
    <label for="input1">Input 1:</label> <input id="input1" type="text" value="my content" />     
    <br />     
    <br />     
    <label for="input2">Input 2 (exclude me):</label> <input id="input2" type="text" class="excludeMeFromReadOnly" />     
    <br />     
    <br />     
    <label for="select1">Select 1:</label>     
    <select id="select1">         
        <option value="1">1</option>         
        <option value="2" selected>2</option>         
        <option value="3">3</option>     
    </select>     
    <br />     
    <br />     
    <label for="select2">Select 2 (exclude me):</label>     
    <select id="select2" class="excludeMeFromReadOnly">         
        <option value="1">1</option>         
        <option value="2">2</option>         
        <option value="3">3</option>     
    </select>     
    <br />     
    <br />     
    <label for="checkbox1">Checkbox 1:</label> <input type="checkbox" id="checkbox1" checked />     
    <label for="checkbox2">Checkbox 2:</label> <input type="checkbox" id="checkbox2" />     
    <label for="checkbox3">Checkbox 3 (exclude me):</label> <input type="checkbox" id="checkbox3" class="excludeMeFromReadOnly" />     
    <br />     
    <br />     
    <label for="radio1">Radio 1 (exclude me):</label> <input type="radio" id="radio1" name="choice" class="excludeMeFromReadOnly" />     
    <label for="radio2">Radio 2:</label> <input type="radio" id="radio2" name="choice" />     
    <label for="radio3">Radio 3:</label> <input type="radio" id="radio3" name="choice" checked /> 
    <br />
    <br />
    <label for="textarea1">Textarea:</label> 
    <textarea id="textarea1"></textarea>
    <br />
    <br />
    <label for="textarea2">Textarea (exclude me):</label>
    <textarea id="textarea2" class="excludeMeFromReadOnly"></textarea>
    
</div>

CSS

.readOnlyOverlay {     
    position: absolute;     
    background-color: #666;     
    opacity: 0.3;     
    filter: alpha(opacity=30);     
    padding: 0pt !IMPORTANT;     
    margin: 0pt !IMPORTANT; 
}

JavaScript

// select all input,select elements. I'd wrap my form in a div. 
$('div#formContent input, div#formContent select, div#formContent textarea').each(function(i, element) {     
    // if the element doesn't have the class named excludeMeFromReadOnly, overlay it to make it look like it's read only     
    if(!$(element).hasClass('excludeMeFromReadOnly')) {         
        generateOverlay($(element));     
    } 
});

function generateOverlay(element) {     
    var dimension = getDimensions($(element));     
    //console.log('top='  + dimension.top + ' left=' + dimension.left +' width='+ dimension.width  + ' height=' + dimension.height);      
    
    // disassociate corresponding label attributes so the value of the element cannot be changed by clicking on the labels     
    var id = $(element).attr('id');     
    var label = $('label[for="'+id+'"]');     
    $(label).removeAttr('for');      
    
    // set my tabindex to -1 so tabs will ignore me     
    $(element).attr('tabIndex', -1);     
    $(label).attr('tabIndex', -1);      
    
    // create a div overlay     
    var overlay = $('<div class="readOnlyOverlay">&nbsp;</div>').appendTo('body');     
    $(overlay).css('top', dimension.top).css('left', dimension.left).css('width', dimension.width).css('height', dimension.height); 
}

function getDimensions(element){     
    var ret = {};      
    
    // The multiple acquisitions of the CSS styles are required to cover any border and padding the elements may have.     
    // The Ternary (parseInt(...) || 0) statements fix a bug in IE6 where it returns NaN,     
    //  which doesn't play nicely when adding to numbers...     
    ret.width = $(element).width() 
        + (parseInt($(element).css('borderLeftWidth')) || 0)       
        + (parseInt($(element).css('borderRightWidth')) || 0)       
        + (parseInt($(element).css('padding-left')) || 0)       
        + (parseInt($(element).css('padding-right')) || 0);     
    ret.height =...