JSFiddle - React, Tailwind, and code Playground

by spikesagal

HTML

<button>Click me</button>
<button class="back icon">Go back</button>
<button class="refresh icon">Refresh</button>
<div class="helptext">
   Click <span class="back icon"></span> to clear the form.
</div>

SCSS

// colors.scss

$fontColor: #010101;
$linkColor: #010141;
$backgroundColor: #ffffff;
$errorColor: #bb0000;


// margins.scss

$lineHeight: 1.2em;
$paragraphMargin: 20px;


// buttons.scss

$buttonPadding: 10px 20px 8px;

button,
.button {
   display: inline-block;
   text-align: center;
   padding: $buttonPadding;
   cursor: pointer;
   text-decoration: none;
   outline: none;
   border: 1px solid $linkColor;
   color: $linkColor;
   background-color: $backgroundColor;

   &:hover {
      background: $linkColor;
      color: $backgroundColor;
   }

   &.icon:before {
      padding-right: 10px;
   }
}


// icons.scss

.icon {
   &:before {
      font-size: 1.5em;
      line-height: 0.5em;
      vertical-align: middle;
   }

   &.back:before {
      content: "⤺";
   }
   &.refresh:before {
      content: "⟲";
   }
}