JSFiddle - React, Tailwind, and code Playground

by neerajdotname

HTML

<div>
    <label for="name">Name</label> 
    <input class="required" type="text" name="name" id="name" />
    <span>*</span>
</div>    
    
<div>
  <label for="email">Email</label> 
  <input type="text" name="email" id="email" />
</div>

<div>
    Student <input type=checkbox name="student"> 
</div>
<div class='student-id'>
    <label for="student-id">Student ID </label> 
    <input type="text" name="student-id" id="student-id" />
</div>

CSS

div { margin: 10px;}


.highlight { background: yellow;}

input[disabled='disabled'] {
  background:#ccc;
}

JavaScript

//
// make the disabled text and input gray
//
var $studentId = $('.student-id input');

// disable the input text
$studentId.attr('disabled', true);

// turn the label color to gray
$studentId.parent().find('label').css({color: 'gray'});