JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
      <title>Lab 3 </title>
	<link rel="stylesheet" href="css/lab3css.css" media="screen" /> 
  </head>
<body>
<h1>html & css - Lab3 </h1>

<div class ="container">
 
   <div class ="align">
	
	<div class ="1 box">	
		<div class ="header">
			<h2>1. input tag - type="text"</h2>
		</div>	
		<form action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/echo-p.pl">

		 <div class= "border">
			<div class ="spaceOne">
				 Name 	<input type="text" name="name" id="n1">
				 <br><br>
				 Phone No.  <input type="text" size="9" name="phone" id="n2" value="416" >
			</div>
		 </div>
		
			
	</div> 
	<div class ="2 box">
		<div class ="header">
			<h2>2. input tag - type="checkbox"</h2>
		</div>	
		 <div class= "border">
			<div class ="spaceTwo">
				 <input type="checkbox" name="Option 1" value="1" checked> Option 1<br>
				 <input type="checkbox" name="Option 2" value="2" > Option 2<br>
				 <input type="checkbox" name="Option 3" value="3"> Option 3<br>
				 <input type="checkbox" name="Option 4" value="4" > Option 4<br>
		     </div> 
		  </div>
		
		
	</div>
	
	<div class ="3 box">
	<div class ="header">
			<h2>3. input tag - type="radio"</h2>
		</div>	
		 <div class= "border">
			<div class ="spaceThree">
				 <input type="radio" name="Option 1" value="1">Option 1<br>
				 <input type="radio" name="Option 2" value="2" checked>Option 2<br>
				 <input type="radio" name"Option 3" value="3">Option 3<br>
				 <input type="radio" name="Option 4" value="4">Option 4<br>
			</div> 
		  </div>
		 
		
	</div>
<div class="topAlign">
	<div class ="4 boxBottom">
	<div class ="header">
			<h2>4. select & option tags</h2>
		</div>	
		 <div class= "border">
			<div class ="spaceFour">
				<select multiple="multiple" name="options" style="width:200px;height:125px" >
					<optgroup label="Group 1">
					  <option value="1">Option 1</option>
					  <option value="2">Option 2</option>
					</optgroup>
					<optgroup label="Group 2">
					  <option...

CSS

<
@media only screen and (max-width:48em) { 

  .container {  
      display:table; 
      width:100%; 
	  display:inline-block;
	  padding: 20px;
		
   } 
   
   .1 { display:table-header-group;
		border-style: solid;
		margin-left:100px;
		
		  } 
   .2 { display:table-header-group; 
		margin-top: 50px;
	}
   .3{ display:table-header-group; } 
   .4{ display::table-row-group} 
   .5{ display::table-row-group} 
   .6{ display::table-row-group} 
   .7{ display::table-row-group}
}
.boxsubmit{
	margin-top:70px;
	display:table-cell
}
.boxBottom{
	
	margin-top:65px;
	display:table-cell;
}
.box{
	display:inline-block;
	
	
}
.border{
	padding: 50px;
	border:3px solid blue;
	margin-left: 10px;
}
.align{
	margin-top:30px;
	margin-left: 150px;
	
}
.topAlign{
	margin-top:65px;

}

/* *********************************************************/
.spaceOne{
margin-right:95px;
margin-top:22px;
margin-bottom:-2px;
}
.spaceTwo{
margin-right:289px;

}
.spaceThree{
margin-right:320px;

}
.spaceFour{
margin-right:165px;
margin-top:21px;
margin-bottom:-2px;
}
.spaceFive{
margin-right:1px;
margin-top:-12px;
}
.spaceSix{
margin-right:400px;

margin-bottom:20px;
margin-top:90px;
}
.spaceSeven{

}
.labels{
position:absolute;
margin-top:-105px;

}
/* *********************************************************/
#n1{
margin-left: 50px;

}
#n2{
margin-left: 20px;

}
#placeholder{
margin-left:10px;
margin-top:5px;
}
#date{
margin-left:10px;
margin-top:5px;
}#week{
margin-left:10px;
margin-top:5px;
}
#month{
margin-left:10px;
margin-top:5px;
}
#email{
margin-left:10px;
margin-top:5px;
}

/* *********************************************************/
 
.header{
    margin-top:-33px;
    margin-left:35px;
    background:white;
	position:absolute;
}

h2{
	border-style: solid;
	border-color: blue;
}
/* *********************************************************/