<div id="root"></div>
body {
  padding: 0.4rem;
}

.box {
  box-sizing: border-box;
  padding: 0.5rem;
  border: 1px solid lightgray;
  border-radius: 2px;
  box-shadow: 2px 1px 1px #ccc;
}

.application {
  width: 100%;
  height: 100%;
}

.label {
  padding: 0.2rem;
  position: relative;
  color: gray;
  top: -0.4rem;
  left: -0.2rem;
}

.header, .footer {
  width: 100%;
}

.box {
  box-sizing: border-box;
  padding: 0.5rem;
  border: 1px solid lightgray;
  border-radius: 2px;
  box-shadow: 2px 1px 1px #ccc;
}

.application {
  width: 100%;
  height: 100%;
}

.label {
  padding: 0.2rem;
  position: relative;
  color: gray;
  top: -0.4rem;
  left: -0.2rem;
}

.header, .footer {
  width: 100%;
}

.sidebar {
  width: 7rem;
  float: left;
}

.content {
  margin-left: 7.5rem;
}

.sidebar, .content {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  height: 10rem;
  overflow: hidden;
}

.description {
  max-width: 30rem;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}

.text {
  background-color: #26A65B;
  opacity: 0.6;
  width: 6rem;
  border-radius: 2px;
  height: 0.7rem;
  margin: 4px;
}

.text.shorter {
  width: 3rem;
}

.text.longer {
  width: 10rem;
}

.footer {
  clear: both;
}

.application {
  box-shadow: 2px 1px 1px #D35400;
  border-color: #D35400;
}

.application .label {
  color: #D35400;
}

.header, .sidebar, .content, .footer {
  box-shadow: 2px 1px 1px #446CB3;
  border-color: #446CB3;
}

.header .label, 
.sidebar .label, 
.content .label, 
.footer .label {
  color: #446CB3;
}


.menu, .article {
  box-shadow: 2px 1px 1px #26A65B;
  border-color: #26A65B;
}

.menu .label,
.article .label {
  color: #26A65B;
}
function Application({ children }) {
  return (
    <div className="application box">
      <Label>Application</Label>
      {children}
    </div>
  );
}

function Header() {
  return (
    <div className="header box">
      <Label>Header</Label>
    </div>
  )
}

function Footer() {
  return (
    <div className="header box">
      <Label>Footer</Label>
    </div>
  )
}

function Sidebar({ children }) {
  return (
    <div className="sidebar box">
      <Label>Sidebar</Label>
      {children}
    </div>
  );
}

function Content({ children }) {
  return (
    <div className="content box">
      <Label>Content</Label>
      {children}
    </div>
  )
}

function Menu() {
  return (
    <div className="menu box">
      <Label>Menu</Label>
      <div className="description">
        <div className="text shorter" />
        <div className="text" />
        <div className="text shorter" />
        <div className="text shorter" />
      </div>
    </div>
  );
}

function Article() {
  return (
    <div className="article box">
      <Label>Article</Label>
      <div className="description">
          <div className="text shorter" /> <div className="text longer" />
          <div className="text shorter" /> <div className="text" />
          <div className="text shorter" /> <div className="text" />
          <div className="text" /> <div className="text shorter" />
          <div className="text shorter" /> <div className="text" />
          <div className="text" /> <div className="text shorter" />
          <div className="text shorter" /> <div className="text longer" />
          <div className="text shorter" /> <div className="longer" />
          <div className="text shorter" /> <div className="text" />
          <div className="text" /> <div className="text shorter" />
          <div className="text shorter" /> <div className="text" />
      </div>
    </div>
  );
}

function Label({ children }) {
  return <div className="label">&lt;{children}&gt;</div>
}

const app = (
  <Application>
    <Header />
    <Sidebar>
      <Menu />
    </Sidebar>
    <Content>
      <Article />
    </Content>
    <Footer />
  </Application>
);

ReactDOM.render(app, document.getElementById('root')); 
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js