JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b2">
 			<p class="t2"><i>b</i>anx</p>
 		</div>
 		<div class="b1">
 		<p class="t1"><span>DESIGN</span><span>WEB DESIGN</span> <span>GRAPHIC DESIGN</span> <span>PRINT DESIGN</span> <span>VIDEO DESIGN</span></p>
 		</div>
 		<div class="l1">
 			<div class="l2">
 				<p class="t3"><i><span>WE ARE</span></i></p>
 			</div>
 		</div>
 		<div>
 			<p class="t4">STUDIO BANX</p>
 		</div>
 		<div>
 			<p class="t5">A CREATIVE WEB & PRINT DIGITAL AGENCY BUILT ON METHOD AND CREATIVE JUICES</p>
 			<hr class="hr">
 		</div>
 		<div>
 			<form action="input1.php" name="test" method="post" class="b5">
 				<input class="b3" type="submit" value="See our work">
 				<input class="b4" type="submit" value="Meet the team">
 			</form>
 		</div>

CSS

body {
  background: url(img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100% 100%;
}
.t1 {
  color: #4D4E67;
  font-family: Rounds;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 130px;
}
.t2 {
  color: #4D4E67;
  font-family: Rounds;
  font-size: 30px;
  font-weight: 800;	
}
.b1 {
  margin-left: 850px;
  margin-right: 10px;
  margin-top: -45px;
}
.b2 {
  margin-left: 80px;
}
.b3 {
  height: 50px;
  width: 250px;
  color: white;
  font-style: italic;
  background: linear-gradient(to top, #514E68, #747288);
  border: 3px;
  font-family: Rounds;
  font-size: 20px;
  margin-right: 15px;
  border-radius: 50px;
  margin-left: 500px;
}
.b4 {
  height: 50px;
  width: 250px;
  color: white;
  font-style: italic;
  background: linear-gradient(to top, #907E8C, #C8B6C2);
  border: 3px;
  font-family: Rounds;
  font-size: 20px;
  border-radius: 50px;
}
.t3 {
  text-align: center;
  color: #4D4E67;
  font-family: Rounds;
  font-size: 23px;
  font-weight: 800;
}
.t4 {
  text-align: center;
  color: #4D4E67;
  font-family: Rounds;
  font-size: 150px;
  font-weight: 800;
  margin: 10px;
}
.t5 {
  text-align: center;
  color: #4D4E67;
  font-family: Rounds;
  font-size: 18px;
  font-weight: 800;
}
.b5 {
  align-content: center;
}
hr {
  color-profile: white;
  width: 70%;
}
.hr {
  margin-bottom: 60px;
  background-image: 
  linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px));
    background-size: calc(50% - 110px);
  	background-repeat: no-repeat;
  	background-position: 0 0, 100% 0;
}
span {
  margin-right: 15px;
}
.l1 {
  width: 70%;
 	text-align: center;
  background-image: 
    linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent...