JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="content">

  <div class="slice-wrapper">

    <div class="slice slice-1_1">

    </div>

    <div class="slice slice-1_2">

    </div>

    <div class="slice slice-1_3">

    </div>

    <div class="slice slice-2_1">

    </div>

    <div class="slice slice-2_2">

    </div>

    <div class="slice slice-3_1">

    </div>

    <div class="slice slice-3_2">

    </div>

    <div class="slice slice-4_1">

    </div>

    <div class="slice slice-4_2">

    </div>

    <a href="#" class="btn">

      Try me!    

    </a>

    <!-- drib -->    

    <div class="drib left">

      <div class="d-1">

      </div>

      <div class="d-2">

      </div>

      <div class="d-3">

      </div>

      <div class="d-4">

      </div>

      <div class="d-5">

      </div>

      <div class="d-6">

      </div>

      <div class="d-7">

      </div>

      <div class="d-8">

      </div>

      <div class="d-9">

      </div>

      <div class="d-10">

      </div>

      <div class="d-11">

      </div>

      <div class="d-12">

      </div>

      <div class="d-13">

      </div>

      <div class="d-14">

      </div>

      <div class="d-15">

      </div>

      <div class="d-16">

      </div>

      <div class="d-17">

      </div>

      <div class="d-18">

      </div>

      <div class="d-19">

      </div>

      <div class="d-20">

      </div>

      <div class="d-21">

      </div>

      <div class="d-22">

      </div>

      <div class="d-23">

      </div>

      <div class="d-24">

      </div>

      <div class="d-25">

      </div>

      <div class="d-26">

      </div>

      <div class="d-27">

      </div>

      <div class="d-28">

      </div>

      <div class="d-29">

      </div>

      <div class="d-30">

      </div>

      <div class="d-31">

      </div>

      <div class="d-32">

      </div>

      <div class="d-33">

      </div>

      <div class="d-34">

      </div>

      <div class="d-35">

      </div>

      <div...

CSS

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

/* reset styles */

* {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-user-select: none;

  user-select: none;

  -ms-touch-action;

  -webkit-touch-callout: none;

}

html, body {

  min-height: 100%;

  height: 100%;

}

body {

  font-family: 'Open Sans', Arial, sans-serif;

  color: #fff;

  background: #4f3e37;

  width: 100%;

}

/* animation */

@-webkit-keyframes slideInRight {

  from {

    -webkit-transform: translateX(1500%);

  }

  to {

    -webkit-transform: translateX(0);

  }

}

@keyframes slideInRight {

  from {

    transform: translateX(1500%);

  }

  to {

    transform: translateX(0);

  }

}

@-webkit-keyframes slideInLeft {

  from {

    -webkit-transform: translateX(-1500%);

  }

  to {

    -webkit-transform: translateX(0);

  }

}

@keyframes slideInLeft {

  from {

    transform: translateX(-1500%);

  }

  to {

    transform: translateX(0);

  }

}

@-webkit-keyframes slideInBottom {

  from {

    -webkit-transform: translateY(1500%);

  }

  to {

    -webkit-transform: translateY(0);

  }

}

@keyframes slideInBottom {

  from {

    transform: translateY(1500%);

  }

  to {

    transform: translateY(0);

  }

}

@-webkit-keyframes slideInTop {

  from {

    -webkit-transform: translateY(-1500%);

  }

  to {

    -webkit-transform: translateY(0);

  }

}

@keyframes slideInTop {

  from {

    transform: translateY(-1500%);

  }

  to {

    transform: translateY(0);

  }

}

@-webkit-keyframes wave {

  from {

    margin-top: 0;

  }

  to {

    margin-top: -24px;

  }

}

@keyframes wave {

  from {

    margin-top: 0;

  }

  to {

    margin-top: -24px;

  }

}

@-webkit-keyframes border-pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);

  }

  70% {

    box-shadow: 0 0 0 10px rgba(255,255,255, 0);

  }

  100% {

    box-shadow: 0 0 0 0...