JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>スルガ銀行</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"/>
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, no-store" />
<meta http-equiv="Expires" content="0" />

<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico"/>
<link rel="stylesheet" href="./css/srg-ripple-0.0.1.css" />
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
	/*<![CDATA[*/	
	$(function(){
		$( $('#ifr')[0].contentWindow ).scroll(function () {
			var destination = document.getElementById("iframe");
			var scrollHeight = $($("#ifr").contentDocument()[0]).document.body.scrollHeight;
			var scrollPosition = $($("#ifr").contentWindow()[0]).document.body.height() + $($("#ifr").contentWindow()[0]).document.body.scrollTop();
			if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
				$('#btn_auth').removeAttr('disabled');
			}
	    });
		
　　		$('#btn_auth').on('click', function(){
　　			var branchCode = $('#branchCode');
　　　			var accountType = $('#accountType');
　　　			var accountCode = $('#accountCode');
　　　			var cashPasswd = $('#cashPasswd');
　　　				
　　　			var errorFlg = false;
　　　			$('#server_msg_area').attr('hidden', 'hidden');
　　　			
　　　			if(branchCode.val() == "") {
  				$('#branchCode_notnull').removeAttr('hidden');
	　　　			$('#branchCode_pattern').attr('hidden', 'hidden');
	　　　			$('#branchCode_icon').removeAttr('hidden');
  				errorFlg = true;
			}
　　　			else {
　　　				if(branchCode.val().length != 3 || !branchCode.val().match(/^\d+$/)){
　　　	　　　				$('#branchCode_pattern').removeAttr('hidden');
　　　	　　　				$('#branchCode_icon').removeAttr('hidden');
　　　	  				errorFlg = true;
				}
　　　	　　　			else {
　　　　　				$('#branchCode_pattern').attr('hidden',...

CSS

html,body,h1,h2,ul,li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

#header_main {
    height: 50px;
    background:linear-gradient(#37a3df,#2e96cf);
    position: relative;
    box-shadow: 0 1px 10px rgba(0,0,0,0.4);
    z-index: 100;
}

#logo {
    position: relative;
    top: 15px;
    height: 21px;
    width: 110px;
    margin: auto;
    display: block;
    background-image: url(../img/custom-2.png);
    background-repeat: no-repeat;
    background-size: 900px 36px;
    background-position: -711px 50%;
}

#header_sub {
    height: 40px;
    width: 100%;
    display: inline-block;
    background: #f3f3f3;
    position: relative;
    border-bottom: 1px solid #d8d8d8;
    display: table;
}

#page_title {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto 0 auto;
    text-align: center;
    font-size: 110%;
    font-weight: bold;
    color: #000;
    text-shadow: 1px 1px 0 #fff;
}

#contents_area {
    margin: 10px;
}

#contents_area_title {
    font-size: 100%;
    font-weight: normal;
    color: #000;
}

ul {
    margin: 10px 0 15px 0;
    border-top: 1px solid #bab5a2;
    border-right: 1px solid #bab5a2;
    border-left: 1px solid #bab5a2;
    border-radius: 0.5em;
}

ul li {
    list-style: none;
    padding: 0.7em 15px;
    border-bottom: 1px solid #bab5a2;
    color: #000;
    text-shadow: 1px 1px 0 #fff;
    background: #fff;
    display: block;
}

.li_box {
    display: table;
    width: 100%;
    height: 2em;
    }

.box_left {
    display: table-cell;
    width:40%!important;
    font-size: 90%;
    vertical-align: middle;
}

.box_right {
    display: table-cell;
    width: 60%!important;
    vertical-align: middle;
}

.input_field {
    width: 100%;
    height: 2em;
    padding-left: 5px;
    display: inline-block;
    border-color: rgb(204, 204, 204);
    border-style: solid;
    border-width: 1px;
}

.li_first {
    border-top-left-radius: 0.5em;
   ...