JSFiddle - React, Tailwind, and code Playground

by Abdull

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div class="text-center">
buttons with <strong>out-of-the-box</strong> "default" size use class <code>btn</code> and additional styling classes:<br/>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

<br/><br/>

buttons with <strong>out-of-the-box</strong> "large" size use class <code>btn</code>, class <strong><code>btn-lg</code></strong> and additional styling classes:<br/>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-link btn-lg">Link</button>

<br/><br/>

buttons with <strong>custom</strong> "xl" size use class <code>btn</code>, <strong>custom class <code>btn-xl</code></strong> and additional styling classes:<br/>
<button type="button" class="btn btn-default btn-xl">Default</button>
<button type="button" class="btn btn-primary btn-xl">Primary</button>
<button type="button" class="btn btn-success btn-xl">Success</button>
<button type="button" class="btn btn-info btn-xl">Info</button>
<button type=<s"button" class="btn btn-warning btn-xl">Warning</button>
<button type="button" class="btn btn-danger btn-xl">Danger</button>
<button type="button" class="btn btn-link btn-xl">Link</button>

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

CSS

.btn-xl {
    padding: 18px 28px;
    font-size: 22px;
    border-radius: 8px;
}