JSFiddle - React, Tailwind, and code Playground

by hfjallemark

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button>Apply Changes</button>
  <br>
  <br>
  <button disabled>Apply Changes</button>
</body>
</html>

SCSS

body {
  background: white;
  margin: 30px;
}

button {
  background: linear-gradient(#fff, #f3f3f3);
  border: solid 1px #c0c0c0;
  border-radius: 3px;
  color: #444;
  font-family: BlinkMacSystemFont;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  outline: 0;
}

button:hover:not(:disabled) {
  background: linear-gradient(#fbfbfb, #efefef);
  cursor: pointer;
}

button:active {
  background: linear-gradient(#f9f9f9, #f0f0f0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

button:disabled {
  background: linear-gradient(#eee, #eee);
  color: #777;
}