JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<a class="button buttonSecondary marginR10" href="">Cancel</a>
<a class="button buttonPrimary" href="">Save</a>

<br/>

<a class="button buttonSecondary marginR10" href="">Back</a>
<a class="button buttonPrimary" href="">Next</a>

<a class="button buttonSecondary marginR10" href="">Back</a>
<a class="button buttonPrimary" href="">Save</a>

<br/>

<a class="button buttonSecondary marginR10" href="">Save &amp; Add Another</a>
                    <a class="button buttonPrimary" href="">Next</a>

<br/>

<a class="button buttonSecondary marginR10" href="">Save &amp; Add Another</a>
                    <a class="button buttonPrimary" href="">Save</a>






<a class="button buttonPrimary" href="">Set Starting Balances</a>
<a class="button buttonSecondary marginR10" href="">Add Asset</a>
<a class="button buttonSecondary marginR10" href="">Add Loan</a>
<a class="button buttonSecondary marginR10" href="">Add Line of Credit</a>
<a class="button buttonSecondary marginR10" href="">Add Investment</a>




<a class="button buttonSecondary marginR10" href="loansInvestments-overlay-loanInvestment.html#openModal">Add Loan</a>
<a class="button buttonSecondary marginR10" href="loansInvestments-overlay-credit.html#openModal2">Add Line of Credit</a>
<a class="button buttonSecondary marginR10" href="loansInvestments-overlay-loanInvestment.html#openModal2">Add Investment</a>
<a class="button buttonSecondary marginR10" href="loansInvestments-overlay-fundingSource.html#openModal2">Add Other</a>

CSS

body {
    padding: 30px;
    margin: 0;
    font-family: Open Sans, sans-serif;
}
.button {
  padding: 0px 11px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 30px;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
}
.buttonSecondary {
  float: left;
  background-color: #7D8F94;
  /* @gray-medium */
}
.buttonSecondary:hover {
  background-color: #3F484B;
  /* @gray-dark */
}
.buttonPrimary {
  float: left;
  background-color: #72C152;
  /* @green-medium */
}
.buttonPrimary:hover {
  background-color: #568C3C;
  /* @green-dark */
}

.marginR10 {
   margin-right: 10px;
}
}