JSFiddle - React, Tailwind, and code Playground

by Dmitry Sikorsky

HTML

<body>
  <div class="master-detail">
    <div class="master-detail__master">
      <div class="title">
        Master
      </div>
      <div class="menu">
        <div class="menu__group">
          <div class="menu__group-title sub-title">
            Group title 1
          </div>
          <a class="menu__item" href="#">Menu item 1</a>
          <a class="menu__item" href="#">Menu item 2</a>
          <a class="menu__item" href="#">Menu item 3</a>
        </div>
        <div class="menu__group">
          <div class="menu__group-title sub-title">
            Group title 2
          </div>
          <a class="menu__item" href="#">Menu item 1</a>
          <a class="menu__item" href="#">Menu item 2</a>
          <a class="menu__item" href="#">Menu item 3</a>
        </div>
        <div class="menu__group">
          <div class="menu__group-title sub-title">
            Group title 3
          </div>
          <a class="menu__item" href="#">Menu item 1</a>
          <a class="menu__item" href="#">Menu item 2</a>
          <a class="menu__item" href="#">Menu item 3</a>
        </div>
      </div>
      <div class="master-detail__secondary-menu menu">
        <div class="menu__group">
          <div class="menu__group-title sub-title">
            Group title 1
          </div>
          <a class="master-detail__secondary-menu-item menu__item" href="#">Menu item 1</a>
          <a class="master-detail__secondary-menu-item menu__item" href="#">Menu item 2</a>
          <a class="master-detail__secondary-menu-item menu__item" href="#">Menu item 3</a>
        </div>
      </div>
    </div>
    <div class="master-detail__detail">
      <h1 class="title">
        Detail
      </h1>
      <h2 class="sub-title">
        Table by “table” tag
      </h2>
      <table class="table">
        <tr class="table__row">
          <th class="table__cell table__cell--header">Cell</th>
          <th class="table__cell table__cell--header">Cell</th>
          <th class="table__cell...

CSS

/* Copyright © 2016 Dmitry Sikorsky. All rights reserved. */
/* Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. */

/* Global */
html, body {
  background: #fff;
  font: normal 15px 'PT Sans', sans-serif;
  color: #323232;
  line-height: 20px;
  margin: 0;
  padding: 0;
  height: 100%;
}

h1, h2, p {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 30px;
  line-height: 60px;
}

h2 {
  font-size: 20px;
  line-height: 40px;
}

a {
  color: #0096fa;
}

a:hover {
  color: #5abeff;
}

::-moz-focus-inner { 
	border: 0;
	padding: 0;
}

::-ms-clear { 
  display: none;
}

::-ms-reveal {
  display: none;
}

/* Title */
.title {
  font-size: 30px;
  line-height: 60px;
}

/* Sub Title */
.sub-title {
  font-size: 20px;
  line-height: 40px;
}

/* Label */
.label {
}

/* Text Box */
.text-box {
  background-color: #f0f0f0;
  border: none;
  font: normal 15px 'PT Sans', sans-serif;
  line-height: 20px;
  outline: none;
  padding: 5px 10px;
  resize: none;
}

.text-box:hover {
  background-color: #f5f5f5;
}

.text-box:focus {
  background-color: #f5f5f5;
}

.text-box--required {
  border-right: 5px solid #ff4100;
}

/* Text Area */
.text-area {
  background-color: #f0f0f0;
  border: none;
  font: normal 15px 'PT Sans', sans-serif;
  line-height: 20px;
  outline: none;
  padding: 5px 10px;
  overflow: auto;
  resize: none;
}

.text-area:hover {
  background-color: #f5f5f5;
}

.text-area:focus {
  background-color: #f5f5f5;
}

.text-area--required {
  border-right: 5px solid #ff4100;
}

/* Field */
.field {
}

.field__label {
  display: block;
  margin-bottom: 1px;
}

.field__text-box {
  width: 430px;
}

.field__text-box--multilingual {
  padding-right: 30px;
  width: 410px;
}

.field__text-area {
  width: 430px;
  height: 190px;
}

.field__text-area--multilingual {
}

.field__culture {
  position: relative;
  left: 450px;
  width: 0;
  z-index: 10;
}

.field__culture-flag {
  background-color:...