JSFiddle - React, Tailwind, and code Playground

by rootnoob

HTML

<!DOCTYPE html>
<html>
<head>
<title>business-training</title>
<meta charset="UTF-8" >
<link href="../main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="../Boss.png" type="image/png">
<!--#include virtual="file.php" -->

</head>
<body>
	<div id="page_align" class="b3radius">
		<div text-align:left id="header">
	<img align:"right" src="../head.jpg" class="pictur1">
				<h1><span class="spnclr"><em>Online</em></span>-бизнес тренинг</h1>
				<ul   class="head">
					<li><img class="lipng" src="../glch.png"  > Мечтаете стать успешным предпринимателем?<br>С чего начать ?
					</li>
					<li><img class="lipng" src="../glch.png"  > Хотите достичь финансовой независимости и сделать<br>успешную карьеру?Как этого достичь?</li>
					<li><img class="lipng"  src="../glch.png" > Надоело <q>горбатиться на дядю</q>?</li>
					<li><img class="lipng"  src="../glch.png"  > Всему этому вас обучат в данной бизнес-школе. </li>
				</ul>
			</p>
			
			
				
	
			
		</div>
		<div id="content">
			<div  class="about">
				<img  src="../cont.jpg" class="contjpg">
				<h2><em>О бизнес-тренинге.</em></h2>
				<p class="abot"><em>Тренинги для тех, кто хочет создать свой бизнес. Данный вид тренингов помогает структурировать собственные цели и задачи в области бизнеса, разработать пошаговую стратегию реализации своих идей и проектов. Не стоит ожидать от такого тренинга, что вам подскажут гениальную идею для создания бизнеса или поделятся каким-нибудь тайным секретом из серии "как заработать миллион". Успех вашего бизнеса зависит от вас, ваших идей, целеустремлённости и трудолюбия. А тренинг может помочь скорее с технической, организационной стороны.<br>
					<br>
				Это активная форма обучения, направленная на получение практического опыта, обратной связи, использование новых моделей поведения в безопасной атмосфере. Благодаря этому за сравнительно небольшой отрезок времени можно добиться очень высоких результатов.</em>
				</p>
			</div>
			<div...

CSS

*{
	margin:0;
	padding:0;
	outline:none;

}
body{
	background:url("/home/user1/Рабочий стол/landing pade/images\bg.png")#DADADA;
	font-family: Arial,sans-serif; 
	font-size: 16px;
	color:#333333;
}
h1{float: top;
	position: absolute;
	font-size: 32px;
	margin: 51px 50px 52px 50px;
	font-family: georgia, serif ;
}
.spnclr{
	color: #7CFC00;
}
h2	{float: top;
	position: absolute;
	font-size: 32px;
	margin: 51px 40px 52px 50px;
	font-family: georgia, serif ;
	color: #191970;
}
h3{

	float: top;
	position: absolute;
	
	font-family:  Times, serif;
	font-size: 30px;
	margin: 40px 200px 41px 320px;
	color: #445161;
   
}
h4{
	float: top;
	position: absolute;
	
	font-family:  Times, serif;
	font-size: 30px;
	margin: 50px 200px 41px 375px;
	color: #445161;
   
}
h5{
	float: top;
	position: absolute;
	
	font-family:  Times, serif;
	font-size: 30px;
	margin: 10px 375px 81px 449px ;
	color: #fff;
}
#page_align{
	width:1000px;
	margin: 35px auto;
	background: #fff;
	box-shadow: 3px 1px 3px #dddddd;
	overflow: hidden;
	}
.b3radius{
	border-radius:4px;
}
#header{
	height: 322px;
	border-bottom: 3px solid #DFDBDB;
	background-color: #445162;
	color:#ffffff;
	text-align: left;
}
 .head{float: top;
	position: absolute;
	font-size: 20px;
	margin: 145px 50px 775px 54px;
	    font: bold 17px/21px 'Trebuchet MS', Helvetica, sans-serif;
	    list-style-type:none;
	    
}
.pictur1{float:right;
	margin: 51px 50px 23px 0px;
	
	
}
.lipng{
width:15px; 
height:15px;
}

#content{
height:2329px;


}
.about{
	height: 393px;
	
	
	text-align: left;
}
.contjpg{
	float: right;
	

	padding: 51px 50px 23px 0px;
	width:30%; 

}
.abot{
	position: absolute;
	width: 595px;
	height: 275px;
	text-align: justify;
	margin: 105px 40px 775px 45px;
	font: Monospace:sans-serif;
	
}
	
.plusmin{
	height: 423px;

background-color:#f5f5f5; 
}
.capt1{
	caption-side: top;
	font-family:  Times, serif;
	font-size: 30px;
	margin-top: 50px ;
	color: #445161;
	
}
.tbl1{
	float: top;
	position: absolute;
	width:1000px;...