JSFiddle - React, Tailwind, and code Playground

by halflling

HTML

<html>
<head>
	<title>Fact web tree</title>
</head>
<body style="margin: 3px;">
	<div class="chain">
		<div class="fact">
			<div class="parent">
				<div class="fact_info">
					<div id="stage_name">Название стадии</div>
					<table class="product">
						<tr>
							<td>Марка:</td>
							<td id="marka">marka</td>
						</tr>
						<tr>
							<td>Форма:</td>
							<td id="forma">forma-12345</td>
						</tr>
						<tr>
							<td>Партия:</td>
							<td><span id="lot">Номер партии</span><span id="lot_note">(Код партии)</span></td>
						</tr>
					</table>
					<table class="values">
						<tr>
							<td>Дата:</td>
							<td>Кол-во:</td>
							<td>Вес:</td>
							<td>Навеска:</td>
						</tr>
						<tr>
							<td id="date_issue">2014.02.25</td>
							<td id="quantity">205</td>
							<td id="weight">17.3</td>
							<td id="weight_one">2.500</td>
						</tr>
					</table>
					<div class="tn">
						<span>Исполнитель: </span><span id="worker">Бутусов А.С.</span>
					</div>
				</div>
			</div>
			<div class="childs">
				<div class="fact">
					<div class="parent">
						<div class="fact_info">
							<div id="stage_name">Название стадии</div>
							<table class="product">
								<tr>
									<td>Марка:</td>
									<td id="marka">marka</td>
								</tr>
								<tr>
									<td>Форма:</td>
									<td id="forma">forma-12345</td>
								</tr>
								<tr>
									<td>Партия:</td>
									<td><span id="lot">Номер партии</span><span id="lot_note">(Код партии)</span></td>
								</tr>
							</table>
							<table class="values">
								<tr>
									<td>Дата:</td>
									<td>Кол-во:</td>
									<td>Вес:</td>
									<td>Навеска:</td>
								</tr>
								<tr>
									<td id="date_issue">2014.02.25</td>
									<td id="quantity">205</td>
									<td id="weight">17.3</td>
									<td id="weight_one">2.500</td>
								</tr>
							</table>
							<div class="tn">
								<span>Исполнитель: </span><span id="worker">Бутусов...

CSS

.chain
{
	border-color: #00476B;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	margin: 1px;
	background: #FAFCFD;
}

.chain:hover
{
	background: #E6F0F5;
}

.fact
{
	display: table;
	margin-left: 30px;
}

.parent
{
	display: table-cell;
	vertical-align: middle;
}

.fact_info
{
	background: white;
	border-radius: 10px;
	border-color: rgb(0,0,0);
	border-width: 1px;
	border-style: solid;
	display: inline-block;
	margin: 3px;
	font-size: 10pt;
	margin: 3px;
}

.fact_info:hover
{
	background: #FFFFEE;
}


.childs
{
	display: inline-block;
	border-style: solid;
	border-width: 1px 0px 1px 5px;
	border-color: #034;
	border-radius: 50px 0px 0px 50px;
	border-spacing: 0px;
	margin: 3px 15px 3px 30px;
	padding: 0px 15px
}

#stage_name
{
	padding: 3px 7px;
	font-weight: bold;
	font-size: 11pt;
}

.product
{
	border-color: rgb(0,0,0);
	border-width: 1px 0px 1px 0px;
	border-style: solid;
	font-size: 10pt;
	width: 100%;
}

.values
{
	text-align: center;
	font-size: 10pt;
	border-color: rgb(0,0,0);
	border-style: solid;
	border-width: 0px 1px 0px 0px;
	border-spacing: 0px;
	width: 100%;
}

.values td
{
	border-color: rgb(0,0,0);
	border-width: 0px 0px 1px 1px;
	border-style: solid;
}

.tn
{
	padding: 3px 7px;
}

#worker
{
	font-weight: bold;
	padding: 3px;
}

#marka, #forma, #lot
{
	font-weight: bold;
	padding: 0px 3px;
}