JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://bootstrap.capdev.co.uk/areas/v1_4_0/content/css/index.css" />


<div class="row cap-panel">
    <div class="col-sm-12">       
        <h2>Buttons</h2>
        <div>
            <button class="btn btn-lg cap-btn-green">Button</button>
            <button class="btn btn-md cap-btn-green">Button</button>
            <button class="btn btn-sm cap-btn-green">Button</button>
            <button class="btn btn-xs cap-btn-green">Button</button>
        </div>
        
        <div class="button-row">
            <button class="btn btn-md cap-btn-orange">Button</button>
            <button class="btn btn-md cap-btn-green">Button</button>
            <button class="btn btn-md cap-btn-red">Button</button>
            <button class="btn btn-md cap-btn-dark-grey">Button</button>
            <button class="btn btn-md cap-btn-grey">Button</button>
            <button class="btn btn-md cap-btn-yellow">Button</button>
            <button class="btn btn-md cap-btn-blue">Button</button>
            <button class="btn btn-md cap-btn-dark-blue">Button</button>
            <button class="btn btn-md cap-btn-white">Button</button>
            <button class="btn btn-md cap-btn-med-blue">Button</button>
            <button class="btn btn-md cap-btn-orange">Button</button>
            <button class="btn btn-md cap-btn-solera-dark-grey">Button</button>
            <button class="btn btn-md cap-btn-solera-charcoal">Button</button>
        </div>
        
    </div>
</div>

CSS

body { padding: 20px }
a { margin: 6px 0; }
.button-row button { margin: 10px 0; display: block;}