JSFiddle - React, Tailwind, and code Playground

by Seungrae Lee

HTML

<table class="errtbl" cellspacing="0" cellpadding="2">
  <tr>
    <th>CODE_ERR</th>
    <td class="readonly" width="100">100</td>
  </tr>
</table>

<table class="errtbl p1" cellspacing="0" cellpadding="2">
  <tr>
    <th>エラーメッセージ</th>
    <td class="readonly" width="500">コストセンターがマスタにありません。</td>
  </tr>
</table>

<table class="errtbl p1" cellspacing="0" cellpadding="2">
  <tr>
    <th>伝票発行日</th>
    <td width=""><input type="text" name="denymd" size="10" maxlength="8" value="20190523"  /></td>
    <th>会計事業所</th>
    <td width=""><input type="text" name="fjg" size="10" maxlength="2" value="HA"  /></td>
  </tr>
</table>

<textarea row="10" col="20">
    test
</textarea>

CSS

table {
 font-family: 'Osaka', 'ＭＳ Ｐゴシック', Sans-serif;
 font-size: 10pt;
}

.errtbl {
  font-size: 12pt;
  border: 1px solid #000;
}

.errtbl th {
  color: #FFCC66;
  padding: 8px 5px;
  background-color: #0055BB;
}

.errtbl td.readonly {
  background-color: #EEEEEE;
}

input[type="text"] {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12pt;
    height: 25px;
}

.p1 {
  margin: 10px 0 0 0;
}

.focused_element {
  background-color: #99FFFF;
}

JavaScript

$(function() {
	$(":text").on("focus", function() {
  	$(this).addClass("focused_element");
  }).on("focusout", function() {
  	$(this).removeClass("focused_element");
  });

});