JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div class="container">
  <a class="button"></a>
</div>

CSS

.container{
  display: flex;
  filter: hue-rotate(0deg) saturate(1.5);
}

.button{
  height: 32px;
  min-width: 32px;
  margin: 0 10px;
  padding: 5px 10px;
  line-height: 30px;
  display: block;
  user-select: none;
  border-radius: 10px;
  background: #4ca5ff;
  background: 
  linear-gradient(0deg, rgba(49,143,238,1) 0%,
  rgba(76,165,255,1) 50%,
  rgba(119,187,255,1) 100%);
  box-shadow: 
  0 -1px 10px 1px #fff4 inset,
  0 6px 0 0 #369,
  0 10px 20px 2px #0004,
  0 15px 5px 2px #0008,
  0 7px 2px 1px #0008;
  transition: all 0.1s ease-in-out;
}

.button:active{
  transform: translateY(4px);
  box-shadow: 
  0 -1px 10px 1px #fff2 inset,
  0 2px 0 0 #147,
  0 6px 20px 2px #0004,
  0 4px 2px 0 #0008,
  0 2px 2px 1px #000;
}

JavaScript

console.log(((5 + 3) >> 1) + 'px')