JSFiddle - React, Tailwind, and code Playground

by Keith Chu

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pull to Open</title>
  </head>
  <body>
    <div class="card">
    <div class="tab-wrapper">
      <div class="pulltab">
        <i class="pulltab-end"></i>
        <a href="#">Pull to Open</a>
      </div>
      <div class="clear"></div>
    </div>
    </div>
  </body>
</html>

CSS

/* line 1, ../sass/style.sass */
body {
  background-image: url("http://f.cl.ly/items/400m0O0c2F0n1D421U1Q/noise-7b209cf74b1a68ced00edf9fe5bba036.gif");
  color: #454545;
  font: 30px sans-serif;
  font-weight: 100;
  padding: 100px; }

/* line 8, ../sass/style.sass */
.clear {
  clear: both; }

@-webkit-keyframes pulltab {
  /* line 13, ../sass/style.sass */
  0% {
    width: 401px; }

  /* line 15, ../sass/style.sass */
  100% {
    width: 40px; } }

@-webkit-keyframes pulltab-text {
  /* line 19, ../sass/style.sass */
  0% {
    width: 360px; }

  /* line 21, ../sass/style.sass */
  29% {
    width: 360px; }

  /* line 23, ../sass/style.sass */
  51% {
    width: 0; }

  /* line 25, ../sass/style.sass */
  100% {
    width: 0; } }

@-webkit-keyframes pulltab-end {
  /* line 30, ../sass/style.sass */
  0% {
    border-radius: 10px;
    box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.35), inset -2px 0 1px rgba(255, 255, 255, 0.2);
    width: 40px;
    -webkit-transform: rotate(0deg) translateY(0) skew(0deg); }

  /* line 35, ../sass/style.sass */
  30% {
    -webkit-transform: rotate(-1.5deg) translateY(-4px) skew(1.5deg); }

  /* line 37, ../sass/style.sass */
  40% {
    -webkit-transform: rotate(-2deg) translateY(-9px) skew(2deg); }

  /* line 39, ../sass/style.sass */
  50% {
    -webkit-transform: rotate(-2.5deg) translateY(-12px) skew(2.5deg); }

  /* line 41, ../sass/style.sass */
  60% {
    -webkit-transform: rotate(-3deg) translateY(-16px) skew(3deg); }

  /* line 43, ../sass/style.sass */
  80% {
    -webkit-transform: rotate(-4deg) translateY(-22px) skew(4deg); }

  /* line 45, ../sass/style.sass */
  100% {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.35), inset -2px 0 1px rgba(255, 255, 255, 0.2), -12px 0 12px rgba(0, 0, 0, 0.4);
    width: 320px;
    -webkit-transform: rotate(-5deg) translateY(-28px) skew(5deg); } }

/* line 52, ../sass/style.sass */
.card {
  background:...