JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

<button >
hello
</button>
<button disabled>
hello disabled
</button>
<br/><br/>
<button class="primary">
hi primary
</button>
<button disabled class="primary">
hi primary disabled
</button>

CSS

body {
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial;
}

button {
  font-size: 1.5rem;
  border: 1px solid transparent;
  font-family: inherit;
  text-align: center;
  padding: 0.5em;
  cursor: pointer;
  border-radius: 2px;
  /* give or take some other props */
}

button:hover {
  background-color: #AAAAAA;
}

button:disabled {
  cursor: not-allowed;
}

button.primary {
  background-color: #FFDE00;
}

button.primary:hover {
   background-color: #ffd621;
}