JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<div class="btn">Button Is Cool</div>

CSS

@import "compass";
body{
    background-color: #333;
    padding: 15px;
}

.btn{
  background-color: rgb(63,185,219);
  @include filter-gradient(#3fb9db, #3fb9db, vertical);
  @include background-image(linear-gradient(top,  rgba(63,185,219,1) 0%,rgba(35,137,206,1) 40%,rgba(34,119,204,1) 50%,rgba(35,137,206,1) 60%,rgba(63,185,219,1) 100%));
  font-family: tahoma;
  font-weight: bold;
  padding: 8px 12px;
  color: white;
  border-radius: 6px;
  display: inline-block;
  border-left: 1px solid #41C0E0;
  border-top: 1px solid #41C0E0;
  border-right: 1px solid #41C0E0;
  border-bottom: 2px solid #2277CC;
  text-shadow: #2371D1 0px -1px 0px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-size: 12px;
  text-transform: uppercase;
  &:active{
    border-bottom: none;
    margin-top: 2px;
  }
}