JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='fullpage flex spread'>

<div class='full mainpage'>
  
  <div class='topbar'>
      <div class='username'>
          Hello, <a href='/profile/1'><b>name</b></a>!
      </div>
      <div class='currency'>
          Coins: <b>7789</b> 
          Gems: <b>59</b> 
          Msgs: <b>4</b> 
          <a href='/logout'>Logout</a>
      </div>
  </div>
  <div class='topbanner'>
      <div class='logo'>
          <a href='/'>logo</a>
      </div>
  </div>
  <div class='navbar'>
      <a href='/profile/1'>Profile</a>
      <a href='/pets'>Pets</a>
      <a href='/lists'>Lists</a>
      <a href='/users'>Users</a>
      <a href='/settings'>Settings</a>
      <a href='/dashboard'>Dashboard</a>
  </div>
  
  <div class='page_title'>
      PAGE TITLE
  </div>
  
  <div class='content'>
  <div class='inner_title'>kkkkk</div>
  ten nhhhnhh  ten nhhte ntte tenn hhhnh hnh hhhh hh hhhnnh hhn hhn hhhh hhhh hhen nttt etet enn hhhn hhnh hhhhhhh hht ennhhh  hhnh hhh hhhhh hnn httt ennhh hn hhn hhhhh hhh hhen nhhh hhn hhh hhh hh  hht ennh hhnhh  nhh hhhhh hh hte nnh hhn hhn hhh hh hhhh ht ennh hhn hhnhh hh hhhh hh enn hhh nhhnh hhh hh   hhh hhhn hhnhh hhh hh hhhtt ennh hh nhh nhh hhh hhhh henn hh nhhn hhhh hhh hhh nnhh hnhh nh hhhh hhh hhe nnh hh nhh nhhh hhh hhhh enn hhh nhh nhhh hh hh hhhhhh  nhh nhh hh hhhh hhn tenn hhhn h hnhh hhh hhhh hh hhn hh nhhh hhhh hhh hnhh nhhh hhhhh hhnhh hhhhh hhh h<p>hh<br>hh</p>x<p>hh<br>hh</p>t...
  
  </div>
  <div class='footer'>
      <div>footer left</div>
      <div>footer right</div>
  </div>
  </div>
  
</div>

<p>
..
</p>

<div class='full elegant2'>

<div class='title'>
    title
</div>

<div class='box bg2 colour4 indent'>aa</div>
<div class='box bg3 colour5 indent'>aa</div>

<p>pppp</p>

<div class='title title_paper'>
    title paper
</div>
ggggggg
<div class='title title_griff indent'>
    title griff
</div>
<p>jj</p>
<div class='title title_dragon shadow'>
    title dragon
</div>
<p>ggg</p>

css test.
</div>

</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Galdeano');

body {
  font-family: 'Galdeano';
  background-size: cover;
  background-attachment: fixed;
  background-image: url(https://images.pexels.com/photos/159020/sunset-sky-afterglow-evening-sky-159020.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  
 /* background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); */

}
img,div {
  box-sizing: border-box;
}

.centre {margin:auto;}
.margin10 {margin:10px auto;}
.margin5 {margin:5px auto;} .displaynone {display:none;}

/* overall page size */
.fullpage {
  width: 80%;
  max-width: 1200px;
  margin: 50px auto;
}

/* for main sections inside page */
.full {width:100%;}
.half {width:50%;}
.third {width:33.33%;}
.quarter {width:25%;}
.fifth {width:20%;}
.tenth {width:10%;}

/* separate sections with some space between them, to accommodate borders */
.nearlyhalf {width:calc(50% - 50px);}
.nearlythird {width:calc(33% - 50px);}




/* gradient banner, stretches across the psuedo-elements.
Some styles have faint images overlaid too */
.title {
  position: relative;
  left: -30px;
  width: calc(100% + 60px);
  padding: 10px 30px 10px 30px;
  margin: 20px 0px;
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(109.6deg, rgba(245, 239, 249, 1) 30.1%, rgba(207, 211, 236, 1) 100.2%);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.title_paper {
  background-image: linear-gradient(109.6deg, #f4e8cd 30.1%, #bb8f79 100.2%);
}

.title_griff {
  background: url("http://griffusion.elementfx.com/microstable/sprites/1/fan.gif") 90% no-repeat,
  linear-gradient(109.6deg, #e6d6ab 30.1%, #bb8f79 100.2%);
}
.title_dragon {
  background: url("http://griffusion.elementfx.com/microstable/sprites/15/fan.gif") 90% no-repeat,
  linear-gradient( 109.6deg, rgba(245,239,249,1) 30.1%, rgba(207,211,236,1) 100.2% );
  
}

.shadow {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.indent {
 ...