JSFiddle - React, Tailwind, and code Playground

by Anastasiya Mikulskaya

HTML

<table class='b-table-form-fields b-tbl_width100'>
<colgroup>
	<col class="b-width80px" span="1">
	<col span="1">
	<col class="b-width50px" span="3">
	<col class="b-width60px" span="1">
</colgroup>
<tr>
	<th colspan="2" class="f-left">Вопрос / Варианты ответа</th>
	<th>Статус</th>
	<th>Множ.<br/>выбор</th>
	<th>Вес</th>
	<th>Удалить<br/>вопрос</th>
</tr>
<tr class="question_block b-question_block_outer">
	<td>Вопрос:</td>
	<td class="b-question_block">
	</td>
	<td class="f-center">
		<input type="checkbox" checked=checked name="question_status_0" value="">
	</td>
	<td class="f-center">
		<input type="checkbox" checked=checkedname="question_status" value="">
	</td>
	<td class="f-center">
		<input size="2" type="text" name="questions" value="">
	</td>
	<td class="f-center">
		<a title="Удалить" href="#">Удалить</a>
	</td>
</tr>
</table>

CSS

* {
	margin: 0;
	padding: 0;
}
html{
	height:100%;
}
* html body {
	height:100%;
}
body{
	height:100%;
	background: #fff;
	font:normal 11px/13px Verdana;
}
img{
	border:0;
}
p{
	color:#494949;
}
a{
	color:#2291ff;
	text-decoration:underline;
}
a:hover{
	text-decoration:none;
}
input , textarea{
	border:1px solid #aeaeae;
}
input {
	padding-left:7px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
input[type="checkbox"]{
	padding:0;
}
input.f-center{
	padding:0;
}
	input:focus, textarea:focus {
	border:1px solid #53a4f4;
	box-shadow: 0 0 8px #cccccc;
	outline: 0 none;
}
select{
	border: 1px solid #AEAEAE;
}
option{
	background:#f0eded;
	padding:0 5px;
}
.option-hover{
	background:#2a2a2a;
}
h1, .h1{
	color:#3397fa;
	font:bold 16px/18px Verdana;
	margin-left:10px;
}
h3, .h3{
	color:#3397fa;
	font:bold 13px/18px Verdana;
}
h4, .h4{
	color:#000;
	font:bold 12px/18px Verdana;
}
.hr-blue{
	border-top:1px solid #79b9f9;
	display:block;
	height:1px;
	margin:5px 0;
}
.f-center{
	text-align:center;
}
.f-left{
	text-align:left;
}
.f-right{
	text-align:right;
}
.f-dark{
	color:#000 !important;
}
.b-float-left{
	float:left;
}
.b-float-right{
	float:right;
}
/* Validate */
.b-border-validate{
	border:1px solid #d82e2e;
	box-shadow: 0 0 2px #d82e2e;
}
.b-border-validate:focus{
	border:1px solid #d82e2e;
	box-shadow: 0 0 2px #d82e2e;
}
.f-validate-text{
	color:#d82e2e;
}
/* end Validate */
#container{
	background: #2291ff;
	height:100%;
	min-height:350px;
	min-width:1000px;
	max-width:1400px;
	position:relative;
	xoverflow:auto;
	width:100%;
	margin:0 auto;
}
#header{
	height:54px;
	width:100%;
	border-bottom:1px solid #2291ff;
	background: url('/images/admin/header-bg.png') repeat-x left top #e9e8eb;
}
label.infield{
	color: #000000;
	left: 0px;
	position: relative;
	top:...