JSFiddle - React, Tailwind, and code Playground

HTML

<div id="frame">
<ol id="list">
	<li><input class="list" name="list1" maxlength="30"></li>
    <li><input class="list" name="list2" maxlength="30"></li>
    <li><input class="list" name="list3" maxlength="30"></li>
</ol>
</div>

CSS

#frame{
	width:19em;
	padding:0.5em;
	background:green;
	margin:0 auto;
	font-size:18px;
	line-height:1em;
	font-family:Arial, san-serif;	
}
ol{
	margin:0;
	padding-left:1.6363em;
	font-size:0.6875em;
}
input{
	font-size:1.3636em;
	line-height:1em;
	width:17.9333em;
	background:none;
	border:none;
	border-bottom:0.0666em solid #000;
	cursor:pointer;
	font-family:"Courier New", Courier, "Andele Mono", monospace;
}

input:focus {
  outline: none;
  font-weight:bold;
}