JSFiddle - React, Tailwind, and code Playground

by zapaza10

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="wrapper">
  <button class="btn btn__success">
    Успешно
  </button>
  <button class="btn btn__danger">
    Ошибка
  </button>
</div>
</body>
</html>

SCSS

$btn-font: 50px;
$success-bg: green;
$danger-bg: spin($success-bg, -135);
@mixin padding($pt, $pr) {
  padding: $pt $pr;
}
.wrapper {
  margin-top: 50px;
}
.btn {
  border: 0;
  border-radius:10px;
  @include padding(10px, 20px);
  font-size: $btn-font;
  &:focus {
    outline: none;
  }
  &:hover {
    box-shadow: 5px 5px #333;
  }
  &__success {
    background-color: $success-bg;
  }
  &__danger {
    background-color: $danger-bg;
  }
}