JSFiddle - React, Tailwind, and code Playground

Acarar - bootstrap

by Jernej Slejko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
{#  button sizes  #}
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    <br><hr><br>
    <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
    <br>
    <div class="btn-group" role="group" aria-label="Default button group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
    <br>
    <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
    <br>
    <div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn...

CSS

.avenir-regular {
    font-family: "AvenirNextLTW01-Regular";
}
.avenir-medium {
    font-family: "Avenir Next LT W01 Bold";
}
.avenir-bold {
    font-family: "AvevenirNextLTW01-Medium";
}

body,
h1, h2, h3, h4, h5 {
    font-family: 'AvenirNextLTW01-Medium', Verdana, Geneva, sans-serif;
}
strong {
    font-family: 'Avenir Next LT W01 Bold', Verdana, Geneva, sans-serif;
}

body {
    background-color: #f2f2f2;
    color: #141414;
    font-size: 16px;
}
/*-------------     colors    --------------*/
.white {
    color: #FFFFFF;
}
.orange {
    color: #f7941e;
}
.grey-dark {
    color: #141414;
}
.grey-light {
    color: #f2f2f2;
}
.red {
    color: #BA002D;
}
.blue {
    color: #428bca;
}
.green {
    color: #279427;
}
.info {
    color: #5bc0de;
}
.danger {
    color: #d42b26;
}
.warning {
    color: #f2b770;
}
.red-bg {
    background-color: #BA002D;
}
.blue-bg {
    background-color: #428bca;
}
.green-bg, .Active {
    background-color: #279427;
}
.info-bg, .NotVisible {
    background-color: #5bc0de;
}
.warning-bg {
    background-color: #f2b770;
}
.danger-bg, .Refused {
    background-color: #d42b26;
}
.color-google {
    color: #ea4335;
}
.color-linkedin {
    color: #0077b5;
}
.color-facebook {
    color: #3b5998;
}
.color-twitter {
    color: #55acee;
}
.color-yahoo {
    color: #7b0099;
}
.color-instagram {
    color: #2e5e86;
}
/*-------------     navbar override   --------------*/
#bs-navbar-collapse-main {
    padding-right: 0;
}
.navbar-nav > li:hover {
    background-color: #e7e7e7;
}
.navbar-default{
    background-color: #f7941e;
    border: none;
}
.navbar-brand,
.navbar-fixed-top,
.navbar-default .navbar-nav > li > a {
    color: #ffffff!important;
}
.nav-username{
    line-height: 56px;
}
.nav-username:hover, .nav-username:focus{
    background-color: transparent !important;
}
.navbar-default .navbar-nav>.dropdown>a .caret{
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-default .navbar-toggle {
    border: 0;
   ...