JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<div ontouchstart="">
  
<!-- Wireframe 'sketch' buttons -->
<a href="#" class="btn"><span>Button</span></a>
<a href="#" class="btn"><span>Sketches</span></a>
  
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Patrick+Hand");

body {
  padding: 4em;
  background: #EEE;
}

a span {
  background: #FFF;
  display: block;
  padding: 5px 15px;
  border-radius: 5px;
  border: 2px solid #000;
}
a:hover {
  box-shadow: 0 2px 0 #000, 0 2px 0px 2px #f03755;
}
a:active {
  top: 4px;
  padding-bottom: 0px;
  box-shadow: 0 1px 0 #000;
}
a {
  position: relative;
  float: left;
  font: normal 22px/25px "Patrick Hand", sans-serif;
  margin-right: 10px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  padding-bottom: 3px;
  border-radius: 5px;
  box-shadow: 0 2px 0 #000;
  transition: padding 0.1s, box-shadow 0.1s, top 0.1s;
  background-image:...

JavaScript

//https://codemyui.com/hand-sketched-3d-wireframe-buttons/