JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<!doctype html>

  
<title>HTML Layout</title>
<link rel="stylesheet" href="css/spa.css" type="text/css"/>


	<style>
	
	.spa-shell-head {
	  top    : 0;
	  left   : 0;
	  right  : 0;
	  height : 40px;
	}
	.spa-shell-head-logo {
	    position: relative;
	  top        : 4px;
	  left       : 4px;
	  height     : 32px;
	  width      : 128px;
	  background : orange;
	}
	
	.spa-shell-head-acct {
	    position: relative;
	  top        : 10px;
	  right      : 0;
	  width      : 64px;
	  height     : 32px;
	  background : green;
	}
	

	</style>

<body>
  <div id="spa">
    <div class="spa-shell-head">
      <div class="spa-shell-head-logo"></div>
      <div class="spa-shell-head-acct"></div>
      <div class="spa-shell-head-search"></div>
    </div>
    <div class="spa-shell-main">
      <div class="spa-shell-main-nav"></div>
      <div class="spa-shell-main-content"></div>
    </div>
    <div class="spa-shell-foot"></div>
    <div class="spa-shell-chat"></div>
    <div class="spa-shell-modal"></div>
  </div>
</body>
  </html>

CSS

/*
 * spa.css
 * Root namespace styles
*/

/** Begin reset */
  * {
    margin  : 0;
    padding : 0;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
  }
  h1,h2,h3,h4,h5,h6,p { margin-bottom : 10px; }
  ol,ul,dl { list-style-position : inside;}
/** End reset */

/** Begin standard selectors */
  body {
    font : 13px 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    color            : #444;
    background-color : #888;
  }
  a { text-decoration : none; }
    a:link, a:visited { color : inherit; }
    a:hover { text-decoration: underline; }

  strong {
    font-weight : 800;
    color       : #000;
  }
/** End standard selectors */

/** Begin spa namespace selectors */
  #spa {
    position : absolute;
    top      : 8px;
    left     : 8px;
    bottom   : 8px;
    right    : 8px;

    min-height : 500px;
    min-width  : 500px;
    overflow   : hidden;

    background-color : #fff;
    border-radius    : 0 8px 0 8px;
  }
/** End spa namespace selectors */

/** Begin utility selectors */
  .spa-x-select {}
  .spa-x-clearfloat {
    height     : 0      !important;
    float      : none   !important;
    visibility : hidden !important;
    clear      : both   !important;
  }
/** End utility selectors */