JSFiddle - React, Tailwind, and code Playground

by jessikwa

HTML

<div class="cams_action_button">Test</div>
<br><br><br>
<div class="cams_action_button_blue">Add Asset</div>

SCSS

/*helpers/variables*/
$toOrange: #f7a03b;
$toBlue: #4a91bb;
/*helpers/mixins*/
@mixin rounded-corners($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}
@mixin box-shadow($top, $left, $blur, $color) {
    -webkit-box-shadow:$top $left $blur $color;
    -moz-box-shadow:$top $left $blur $color;
    box-shadow:$top $left $blur $color;
}
@mixin gradient($color, $strength) {
    $colorLight: lighten($color, $strength);
    $colorDark: darken($color, $strength);
    background-color: $color; 
    background-image: -ms-linear-gradient(top, $colorLight 0%, $colorDark 100%); 
    background-image: -moz-linear-gradient(top, $colorLight 0%, $colorDark 100%); 
    background-image: -o-linear-gradient(top, $colorLight 0%, $colorDark 100%); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $colorLight), color-stop(1, $colorDark)); 
    background-image: -webkit-linear-gradient(top, $colorLight 0%, $colorDark 100%); 
    background-image: linear-gradient(top, $colorLight 0%, $colorDark 100%); 
}
/*helpers/placeholders*/
%action_btn {
	color: #FFFFFF;
	font-size: 11px;
    text-align: center;
    line-height: normal;
    font-family: arial;
    cursor: pointer;
    text-decoration: none;
    padding: 5px 8px;
    display: inline-block;
    outline: 0;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	@include rounded-corners(3px);
	@include box-shadow(0, 1px, 4px, rgba(0, 0, 0, 0.1));
}
/*components/buttons*/
.cams_action_button {
	@extend %action_btn;
	@include gradient($toOrange, 5%);
    &:hover {
       @include gradient($toOrange, 12%); 
    }
}
.cams_action_button_blue {
	@extend %action_btn;
	@include gradient($toBlue, 5%);
    &:hover {
       @include gradient($toBlue, 12%); 
    }
}