JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="today">
	<?php echo $day_name; ?>, <?php echo $day_num; ?> of <?php echo $month_name; ?>
</div>
<div id="week">
<?php echo $week_num; ?> of <?php echo $year; ?>
</div>	
<form method="GET" id="myForm" action="" autocomplete="off" name="myform">
<input type="number" id="week_num" name="week_num" step="1" max="53" value="<?php echo date('W'); ?>" >
<div id="row_1"	>
<input type="date" id="date_today" name="date_today" value="<?php echo date('Y-m-d'); ?>" >
<label for="distance">Miles:</label>
<input type="number" id="distance" step=".01" name="distance"><br>
</div>
<div id="row_2"	>	
<label for="minutes">Mins:</label>
<input type="number" id="minutes" name="minutes" onblur="calc()">
<label for="seconds">Secs:</label>
<input type="number" id="seconds" name="seconds" onblur="calc()"><br>
<label for="average">Ave:</label><input type="number" id="average" name="average" step=".01" width="1">
<label for="max">Max:</label><input type="number" id="max" name="max" step=".01">
</div>
<div id="row_3"	>
    <input type="radio" id="out"  onclick="hide_conditions()" name="in_out" value="out">
    <label for="out">Out</label>
    <input type="radio" onclick="hide_conditions()" id="in" name="in_out" value="in">
    <label for="in">In</label>
	</div>	
<div id="conditions">  
<label for="temp">Temp:</label>	
<input type="number" id="temp" name="temp" step="1">
<label for="wind_dir">Wind direction:</label><input type="number" id="wind_dir" name="wind_dir" step=""><label for="wind_speed">Wind speed:</label><input type="number" id="wind_speed" name="wind_speed" step=""><label for="wind_gust">Wind gust:</label><input type="number" id="wind_gust" name="wind_gust" step=""></div>
<div id="notes_bike">	
<textarea id="notes" name="notes"></textarea>
</div>
</form>