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-right">
			<div class="frame-section">
				<div class="layout-line big-title">
					<a href="#" class="interactive inline-string">Тестовый фрейм</a>
				</div>
			</div>
			<div class="block">
				<a href="#" class="layout-line line archive">
					<div class="icon archive-margin"><div class="icon-checkbox"></div></div>
					<div class="icon archive-margin force-visibility"><i class="fa fa-envelope"></i></div>
					<div class="archive-content">
						<div class="main-line">
							<div class="main-line-content">Михаил Паниковский → Александр Корейко и еще 2</div>
							<div class="main-line-status">
								<div class="white-shadow-lr"></div>&nbsp;
								<div class="icon force-visibility"><i class="fa fa-tag"></i></div>&nbsp;
								<div class="status-date">16:35</div>&nbsp;
								<div class="icon"><i class="fa...

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-color: #fff;
  width: 100%;
  max-width: 830px; }

.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: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify;
  padding: 0px 10px;
  height: 28px;
  border-bottom: 2px solid #333; }

.nav-section {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.nav-item {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
 ...