JSFiddle - React, Tailwind, and code Playground

buttons

by Dug Sohn

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<br/>
<div class="container">

<div class="row">
        <div class="col-xs-6 col-sm-4 col-lg-4 text-left">
            <button type="button" class="btn btn-default btn-lg"><i class="fa fa-chevron-left "></i> Back</button>
        </div>
        <div class="col-xs-6 col-sm-8 col-lg-8 text-right ">
            <button class="btn btn-success btn-lg" ng-disabled="formStatus == 'isLoading'" ng-click="enrollmentSubmit(enrollmentForm)">
                <span ng-switch="formStatus">
                    <!-- ngSwitchWhen: notLoading --><i class="fa fa-lock ng-scope" ng-switch-when="notLoading"></i><!-- end ngSwitchWhen: -->
                    <!-- ngSwitchWhen: isLoading -->
                    <!-- ngSwitchWhen: success -->
                </span>
                Review <span class="visible-sm-inline visible-lg-inline visible-md-inline">Your Order</span> <i class="fa fa-chevron-right"></i>
            </button>
        </div>
    </div>
    <div class="row">
    <div class="col-xs-12 text-center">
    <br>
    <br>
    
      <button type="button" data-toggle="modal" data-target="#cancelModal" class="btn btn-link"><i class="fa fa-times-circle-o "></i> Cancel</button>

    </div>
    </div>
    </div>

SCSS

$account-base:  rgba(6,81,128,1.0)       !default;
$plans-base:    rgba(254,162,32,1.0)     !default;
$payment-base:  rgba(46,177,52,1.0)      !default;
$control-base:  rgba(27,141,205,1.0)     !default;
$footer-base:   rgba(231,231,231,1.0)    !default;
$dark-base:     rgba(10,10,10,1.0)       !default;
$highlight-row:  rgba(241,240,207, 0.8) !default;

@import url('https://fonts.googleapis.com/css?family=Open+Sans');


* {
font-family:  "Open Sans", "Segoe UI", Tahoma, sans-serif
}
.btn {
   border-radius: 2px;
   text-transform: uppercase;
 
}