JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://bootstrap/areas/v1_1_0/content/bundles/css" />
<script src="http://bootstrap/areas/v1_1_0/content/bundles/js"></script>

<div class="row cap-panel">
    <div class="col-sm-12">       
        <h2>Buttons</h2>
        <a href="#" class="btn btn-lg cap-btn-green">Button</a>
        <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><br/>
        
        <a href="#" class="btn btn-lg cap-btn-green">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-red">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-dark-grey">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-grey">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-yellow">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-blue">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-dark-blue">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-white">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-dark-blue cap-btn-pill">Button</a><br/>
        <a href="#" class="btn btn-lg cap-btn-dark-blue cap-btn-full">Button</a>
    </div>
</div>

CSS

body { padding: 20px }
a { margin: 6px 0; }