JSFiddle - React, Tailwind, and code Playground

HTML

<div id="add_course">
    <form action="add_course.php" method="post" enctype="multipart/form-data" name="add_course_form" id="add_course_form" onsubmit="return validate_form();">
    <div class="add_course_lables">
        <input class="add_course_name" name="coursename" type="text" id="coursename" size="30" placeholder="Course Name" maxlength="64" />
        <br />
        <input  name="par" type="text" id="par" size="30" placeholder="Par" maxlength="2" />
        <input name="rating" type="text" id="rating" size="30" placeholder="Rating" maxlength="2" />
        <input name="slope" type="text" id="slope" size="30" placeholder="Slope" maxlength="3" /> 
        <br />
    </div>
	<div style="min-width: 1000px; overflow: auto; display: table; width: 1000px; text-align:center" id="add_course_table">  
      	<div style="float:left;">
        	<div style="width:60px"  id="add_course_top_row">Hole</div>
			<div id="add_course_top_row">1</div>
            <div id="add_course_top_row">2</div>
            <div id="add_course_top_row">3</div>
            <div id="add_course_top_row">4</div>
            <br style="clear: left;" /> 
		</div>
        <div>               
          	<div id="add_course_other_rows_left">Par</div>
			<div id="add_course_other_rows"><input type="text" maxlength="1" name="par1"/></div>
            <div id="add_course_other_rows"><input type="text" maxlength="1" name="par2"/></div>
            <div id="add_course_other_rows"><input type="text" maxlength="1" name="par3"/></div>
            <div id="add_course_other_rows"><input type="text" maxlength="1" name="par4"/></div>
      		<br style="clear: left;" />
		</div>
      	<div>
            <div id="add_course_other_rows_left">Length</div>
			<div id="add_course_other_rows"><input type="text" maxlength="3" name="length1"/></div>
			<div id="add_course_other_rows"><input type="text" maxlength="3" name="length2"/></div>
			<div id="add_course_other_rows"><input type="text" maxlength="3"...

CSS

@charset "utf-8";
#add_course{
    margin:0 auto;
    border:1px solid #ccc;
    width:80%
}
.add_course_lables {
	width: 500px;
	height: 120px;
	border-radius: 5px 5px 0px 0px;
	margin-left: auto;
	margin-right: auto;
}
.add_course_lables input {
    color: #16a085;
    padding: 10px;
    margin-top: 5px;
	width:135px;
    font-size: 15px;
    border: 1px solid #16a085;
    border-bottom: 2px solid #16a085;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
	width:91.5%;
}
.add_course_lables input:focus {
    border-color:#2ecc71;
    outline: none;
    box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
    border-color:#2ecc71;
    outline: none;
    box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button{
	background: #16a085;
	color: white;
	border: 1px solid #16a085;
	border-radius: 5px;
	transition: background .4s linear;
	padding: 10px;
	font-weight: 600;
	font-size: 20px;
	cursor: pointer;
	margin-top: 10px;
	position: relative;
	left: 50%;
	right: 0%;
}

#add_course_top_row{
	border-radius: 4px;
	border-color: #FFFFFF;
	border-style: solid;
	background: #16A085;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	text-align: center;
	padding: 2px;
	margin-right: 0px;
	width: 30px;
	border-width: thin;
	display: inline-flex;
}
#add_course_other_rows_left{
	color: #16a085;
	border-radius: 4px;
	border-color: #16a085;
	border-style: solid;
	border-width: thin;
	background: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	text-align: center;
	padding: 2px;
	margin-right: 3px;
	margin-top:2px;
	width: 60px;
	float:left;
}
#add_course_other_rows input {
    color: #16a085;
    border-radius: 5px;
	border color:#BFBFBF;
	border-style: solid;
	border-width: thin;
	font-family: 'Open Sans', sans-serif;
    font-size: 15px;
	text-align: center;
    padding: 3px;
    margin-top:...