JSFiddle - React, Tailwind, and code Playground

by Peter Knight

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<a href="#" class="uk-button uk-button-primary uk-margin-left">Primary</a>

<a href="#" class="uk-button cv-button-outline uk-margin-left">Outline</a>

SCSS

/* START: SCSS Variables */
$colour-punch: #f44500;
$colour-brick: #bf2800;

/* START: Custom UIKit overrides */

body, html {
	font-family: 'Open Sans', sans-serif;
	padding: 10px;
	}

.uk-button {
	letter-spacing: .75px;
	border-radius: 3px;
	font-size: 11px;
  line-height: 30px;
  padding: 0 8px;
  font-weight:400;
}

.uk-button-primary {
	background: $colour-punch;
	}

.uk-button-primary:hover {
	background: $colour-punch;
	}

/* CV short for custom  decalaration */
.cv-button-outline {
	background: transparent;
	border: 1px solid $colour-punch;
	color: $colour-punch;
}

.cv-button-outline:hover {
	background: $colour-brick;
	color: #fff;
	border: 1px solid $colour-brick;
}