JSFiddle - React, Tailwind, and code Playground

by Alexander Tewpin

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<body>
	<nav>
		<div class="nav-container">
			<div class="nav-section">
				<a href="#" class="nav-item"><i class="tempicon i-logo"></i>&nbsp;Рабочий стол</a>
				<a href="#" class="nav-item">Отчеты</a>
				<a href="#" class="nav-item">Справочники</a>
				<a href="#" class="nav-item">Политики</a>
				<a href="#" class="nav-item">Настройки</a>
				<a href="#" class="nav-item">Помощь</a>
			</div>
			<div class="nav-section">
				<a href="#" class="nav-item"><i class="tempicon i-upload"></i>&nbsp;9</a>
				<a href="#" class="nav-item">Сохранить все</a>
			</div>
			<div class="nav-section">
				<a href="#" class="nav-item"><i class="fa fa-flag"></i>&nbsp;5</a>
				<a href="#" class="nav-item"><i class="fa fa-exclamation-triangle"></i>&nbsp;3</a>
				<a href="#" class="nav-item">Александр Тюпин&nbsp;<i class="fa fa-chevron-circle-down"></i></a>
				<a href="#" class="nav-item"><i class="fa fa-search"></i></a>
			</div>
		</div>
	</nav>
	<div class="common-layout layout-default">
		<div class="frame-left">
			<div class="frame-section">
				<div class="layout-line big-title">
					<div>Политики</div><div class="icon"><i class="fa fa-plus-circle"></i></div>
				</div>
			</div>
			<div class="block block-table">
				<div class="layout-line title">
					<div>Контекстные</div>
				</div>
				<a href="#" class="layout-line selected-line">
					<div>Общая политика</div><div class="icon"><i class="fa fa-times"></i></div>
				</a>
				<a href="#" class="layout-line line">
					<div>Запасная политика</div><div class="icon"><i class="fa fa-times"></i></div>
				</a>
			</div>
			<div class="block block-table">
				<div class="layout-line title">
					<div>Контентные</div>
				</div>
				<a href="#" class="layout-line line">
					<div>Секреты</div><div class="icon"><i class="fa fa-times"></i></div>
				</a>
				<a href="#" class="layout-line line">
					<div>Отлов...

CSS

html, body {
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  margin: 0px;
  padding: 0px;
  height: 100%; }

a {
  color: black;
  text-decoration: none; }

a.interactive {
  color: #03c; }
  a.interactive:hover {
    color: #900; }

.common-layout {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  padding-top: 30px;
  box-sizing: border-box;
  background-color: #ddd; }
  .common-layout > * {
    padding-top: 15px;
    overflow-y: auto; }
    .common-layout > *::-webkit-scrollbar {
      display: none; }

.layout-default > :nth-child(1) {
  background: #e4e4e4;
  min-width: 220px;
  max-width: 220px; }
.layout-default > :nth-child(2) {
  background: #f2f2f2;
  min-width: 400px;
  max-width: 550px; }
.layout-default > :nth-child(3) {
  background-color: #fff;
  width: 100%;
  max-width: 830px; }

.layout-archive > :nth-child(1) {
  background: #e4e4e4;
  min-width: 220px;
  max-width: 220px; }
.layout-archive > :nth-child(2) {
  background: #f2f2f2;
  min-width: 590px;
  max-width: 590px; }
.layout-archive > :nth-child(3) {
  background-color: #fff;
  width: 100%;
  max-width: 790px; }

.frame-right {
  box-shadow: 3px 0 3px 0px rgba(0, 0, 0, 0.2); }

.white-shadow-lr {
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  flex-shrink: 0;
  -ms-flex-negative: 0;
  margin-left: -20px;
  width: 20px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  z-index: 0; }

nav {
  background-color: #fff;
  position: absolute;
  width: 100%; }

.nav-container {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content:...