JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<script src="http://fonts.googleapis.com/css?family=Six+Caps"></script>
<script src="http://fonts.googleapis.com/css?family=Ubuntu+Condensed"></script>
<script src="http://fonts.googleapis.com/css?family=Alex+Brush"></script>
<div class="section section1">
  <div class="sign sign1">
    <span>s</span>
    <span>w</span>
    <span>e</span>
    <span>e</span>
    <span>t</span>
    <span>s</span>
    <span>h</span>
    <span>o</span>
    <span>p</span>
  </div>
</div>

<div class="section section2">
  <div class="sign sign2">
    <span>JB Young</span>
    <div>Department Store and what-have-you</div>
  </div>
</div>

<div class="section section3">
  <div class="sign sign3">
    <span>A</span>
    <span>l</span>
    <span>l</span>
    <span>y</span>
    <span>N</span>
    <span>i</span>
    <span>s</span>
    <span>h</span>
    <div>Sportstore</div>
  </div>
</div>

CSS

/* 
  red d65423 
  yellow: f4b151
  light blue 72BBB3
  dark blue 6193ac
*/

body {
  font-size: 16px;
  margin: 0;
}

.section {
  overflow: hidden;
  padding: 100px 0;
  text-align: center;
  width: 100%;
}
.section1 {
  background: #d65423;
}
.section2 {
  background: #72BBB3;
}
.section3 {
  background: #f4b151;
}

/**
 * Sign 1
 */

.sign1 span {
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-family:'Six Caps', sans-serif;
  font-size: 90px;
  line-height: 1;
  padding: 30px 0;
  position: relative;
  text-align: center;
  width: 70px;
}
.sign1 span:nth-child(even) {
  background: #72BBB3;
}
.sign1 span:nth-child(odd) {
  background: #6193ac;
  margin: 0 -14px;
  top: 10px;
  width: 90px;
  z-index: 1;
}

.sign1 span:nth-child(3),
.sign1 span:nth-child(5),
.sign1 span:nth-child(7) {
  background: #f4b151;
}

.sign1 span:nth-child(5) {
  background: #6193ac;
}

.sign1 span:nth-child(1),
.sign1 span:nth-child(5),
.sign1 span:nth-child(9) {
  -webkit-clip-path: polygon(0 10px, 90px 0, 80px 150px, 10px 145px);
  clip-path: polygon(0 10px, 90px 0, 80px 150px, 10px 145px);
}

.sign1 span:nth-child(3),
.sign1 span:nth-child(7) {
  -webkit-clip-path: polygon(0 0, 90px 10px, 80px 145px, 10px 150px);
  clip-path: polygon(0 0, 90px 10px, 80px 145px, 10px 150px);
}

/**
 * Sign 2
 */

.sign2 {
    display: inline-block;
    font-family:'Six Caps', sans-serif;
    font-size: 45px;
    line-height: 1;
    position: relative;
    width: 650px;
    z-index: 1;
}
.sign2:before {
    background: #e9d1af;
    -webkit-clip-path: polygon(0 0, 650px 10px, 630px 80px, 20px 100px);
    clip-path: polygon(0 0, 650px 10px, 630px 80px, 20px 100px);
    content: "";
    display: inline-block;
    font-size: 45px;
    height: 100px;
    left: 0;
    line-height: 1;
    position: absolute;
    top: -20px;
    width: 650px;
    z-index: -1;
}

.sign2 span {
    font-size: 90px;
    background: #d65423;
    -webkit-clip-path: polygon(0 0, 240px 5px, 220px 130px,...