JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<div class="side"><span class="no-support-message"><div class="warning browser-support grid panel fade-content"><h1>No support</h1><p>Sorry but the CSS clip-path property does not support basic shapes in <span class="your-browser">Chrome 49</span>. Please try opening this
  page in another browser.</p>
</div><a href="#" class="grid panel browser-support fade-content"><h2 class="block">Browser Support <small>X</small></h2><div class="table"><span class="icon chrome" data-version="24+"></span> <span class="icon safari" data-version="8+"></span> <span class="icon opera" data-version="15+"></span> <span class="icon ie unsupported"></span> <span class="icon firefox unsupported"></span></div></a></span>
<section
class="dark-panel inset">
  <div class="flex">
    <h2>Round edges</h2>
    <input value="5% 20% 0 10%" class="inset-round" type="text">
  </div>
  <p>The <code>inset()</code> shape optionally allows values similar to <code>border-radius</code> for rounded edges. This new feature may be buggy in <span class="your-browser">Chrome 49</span>.</p>
  </section>
  <section class="dark-panel custom">
    <h2>Custom shape</h2>
    <button class="finish"></button>
  </section>
  <section class="shapes vertical" tabindex="-1">
    <ul>
      <figure class="gallery-cell" data-name="Triangle" data-type="polygon" data-coords="50,0 0,100 100,100">
        <div style="-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" class="shape Triangle"></div>
        <figcaption>Triangle</figcaption>
      </figure>
      <figure class="gallery-cell" data-name="Trapezoid" data-type="polygon" data-coords="20,0 80,0 100,100 0,100">
        <div style="-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)" class="shape Trapezoid"></div>
        <figcaption>Trapezoid</figcaption>
      </figure>
      <figure class="gallery-cell" data-name="Parallelogram"...

CSS

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: 0
}

figure,
header,
main,
section {
  display: block
}

body,
html {
  position: relative;
  height: 100%
}

body {
  font: 100%/1.5 "Arial", sans-serif;
  background: #d3d0c9;
  color: #100a09
}

@media (min-width:800px) {
  body {
    padding: 0 .5rem;
    padding-left: -webkit-calc(100% - 23.625rem);
    padding-left: calc(100% - 23.625rem)
  }
}

.main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column
}

@media (min-width:800px) {
  .main {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    right: 23.625rem;
    padding: .25rem .25rem .25rem .75rem;
    -ms-touch-action: none;
    touch-action: none
  }
}

header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background: rgba(251, 252, 247, .75);
  box-shadow: inset 0 -1px rgba(211, 208, 201, .25);
  padding: .75rem 1rem
}

@media (min-width:800px) {
  header {
    font-size: larger;
    margin-top: .5rem;
    padding: .75rem 1rem;
    border-radius: 2px 2px 0 0
  }
}

header a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  padding: .25rem;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

header a:hover {
  text-decoration: underline
}

header iframe {
  max-width: 95px;
  -webkit-animation: load 1s both;
  animation: load 1s both
}

@-webkit-keyframes load {
  from {
    opacity: 0
  }
}

@keyframes...