JSFiddle - React, Tailwind, and code Playground

Bootstrap Styled Button Groups

by Jennifer Perrin

HTML

<div class="container well">
    <!-- Button Tags first -->
    <div class="btn-group" style="margin: 9px 0;">
        <button class="btn">Left</button>
        <button class="btn">Middle</button>
        <button class="btn">Right</button>
    </div>
    <div class="btn-group" style="margin: 9px 0;">
        <button class="btn btn-primary">Left</button>
        <button class="btn btn-primary">Middle</button>
        <button class="btn btn-primary">Right</button>
    </div>
    <div class="btn-group" style="margin: 9px 0;">
        <button class="btn btn-info">Left</button>
        <button class="btn btn-info">Middle</button>
        <button class="btn btn-info">Right</button>
    </div>
    <div class="btn-group" style="margin: 9px 0;">
        <button class="btn btn-success">Left</button>
        <button class="btn btn-success">Middle</button>
        <button class="btn btn-success">Right</button>
    </div>
    <!-- Lets use some Anchor Tags Now -->
    <div class="btn-group" style="margin: 9px 0;"> <a href="javascript:void(0);" class="btn btn-warning">Left</a>
 <a href="javascript:void(0);" class="btn btn-warning">Middle</a>
 <a href="javascript:void(0);" class="btn btn-warning">Right</a>

    </div>
    <div class="btn-group" style="margin: 9px 0;"> <a href="javascript:void(0);" class="btn btn-danger">Left</a>
 <a href="javascript:void(0);" class="btn btn-danger">Middle</a>
 <a href="javascript:void(0);" class="btn btn-danger">Right</a>
    </div>
    <div class="btn-group" style="margin: 9px 0;">
        <a href="javascript:void(0);" class="btn btn-inverse">Left</a>
        <a href="javascript:void(0);" class="btn btn-inverse">Left Middle</a>
        <a href="javascript:void(0);" class="btn btn-inverse">Middle</a>
        <a href="javascript:void(0);" class="btn btn-inverse">Right Middle</a>
        <a href="javascript:void(0);" class="btn btn-inverse">Right</a>
    </div>
    <!-- Button Toolbar with Groups -->
    <div class="btn-toolbar">
        <div...

CSS

body {
    font-family:'Helvetica Neue', Helvetica;
    font-size: 13px;
}
/*==== Generic ====*/
 input, button, select, textarea {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
label, input, button, select, textarea {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
}
a {
    text-decoration: none;
}
.container {
    width: 500px; 
    margin: 20px auto;
}
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: whiteSmoke;
    border: 1px solid #EEE;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
/*==== Buttons ====*/
 .btn {
    display: inline-block;
    *display: inline;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: 13px;
    line-height: 18px;
    *line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    *background-color: #e6e6e6;
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
   ...