JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="wrapper">
    
    <img src="http://cssdeck.com/uploads/media/items/9/9fVQoLD.png">
    <div class="hi"></div>
    
  <h1>Another animated checkbox</h1>
  
  <div class="checkbox checkbox-alt">
    <input type="checkbox" id="cb-alt" name="cb-alt" />
    <label for="cb-alt"></label>
  </div>
  
  <h5>Check both boxes &amp; see a face.</h5>
</div>

CSS

/*
See the explanation of the animation here:
http://codepen.io/timseverien/pen/yvJkm
*/
@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@-moz-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@-ms-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
body {
  background-color: #6aa;
  font-family: 'Lato', sans-serif;
  font-weight: 100%;
}

.wrapper {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
}

.checkbox, .checkbox-alt {
  background-color: #fff;
  display: inline-block;
  height: 50px;
  margin: 0 0.25em;
  width: 50px;
}
.checkbox label, .checkbox-alt label {
  display: block;
  height: 50px;
  position: relative;
  width: 50px;
}
.checkbox label:after, .checkbox-alt label:after {
  /*
  This element has a border on the right, and top. By rotating it looks like a check symbol, but the wrong way. That's why I'm flipping it with scaleX(-1)
  */
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  /*
  I want to position the symbol using the left top, because when increasing the width and height of an object, it expands from the top left corner as well. That is what makes it looks like it's being drawn.
  */
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
 ...