JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<div class="center"><a class="pushme"> <span class="inner">push me</span></a>
    <!--a.pushme //span.inner me too
  -->
</div><a class="sig" href="http://nathan.tokyo" target="_blank">NATHAN.TOKYO</a>

CSS

.pushme {
	 position: relative;
	 font-weight: 700;
	 background-color: #384d9d;
	 border-radius: 0.6em;
	 display: inline-block;
	 margin: 1em;
}
 .pushme .inner {
	 display: inline-block;
	 background-color: #f6f3eb;
	 border-radius: 0.6em;
	 border: 0.3em solid #384d9d;
	 padding: 1em;
	 cursor: pointer;
	 text-transform: uppercase;
	 user-select: none;
	 transform: translate3d(0.6em, -0.6em, 0);
	 transition: transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	 transition-delay: 220ms;
}
 .pushme:active .inner, .pushme.click .inner {
	 transform: translate3d(0, 0, 0);
	 transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
 body {
	 background: #f6f3eb;
	 font-family: 'Open Sans', sans-serif;
	 color: #384d9d;
	 font-size: 5vh;
}
 .center {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 80vw;
	 text-align: center;
	 transform: translate3d(-50%, -50%, 0);
}
 .sig {
	 position: fixed;
	 bottom: 5px;
	 right: 5px;
	 text-decoration: none;
	 font-size: 12px;
	 font-weight: 800;
	 font-family: sans-serif;
	 color: rgba(0, 0, 0, 0.4);
}