JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="button-vertical-menu"> 
    
<div class="button-vertical-group">
  <button type="button" class="btn btn-default button-vertical" data-toggle="button" aria-pressed="false" autocomplete="off">
  Suporte
</button>
</div>

<div class="button-vertical-group">
  <button type="button" class="btn btn-default button-vertical" data-toggle="button" aria-pressed="false" autocomplete="off">
  Gennesis
</button>
</div>

<div class="button-vertical-group">
  <button type="button" class="btn btn-default button-vertical" data-toggle="button" aria-pressed="false" autocomplete="off"> 
  Editor
</button>
</div>

<div class="button-vertical-group">
  <button type="button" class="btn btn-default button-vertical" data-toggle="button" aria-pressed="false" autocomplete="off">
  Ferramentas
</button>
</div>
    
</div>

CSS

.btn {
    outline: none !important;
}
div.button-vertical-group {
    margin: 0;
    width: 30px;
    padding: 0 5px;
}
button.button-vertical {
    width: 100px;  
    padding: 0;
    margin: 0;
    /* Chrome, Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

button.button-vertical {
    margin: 40px -40px;
}

.btn-default:focus {
    /*background-color:#fff;*/
}
 .btn-default.active,
 ,.btn-default:active,
 ,.btn-default:hover,.open>.dropdown-toggle.btn-default{
    color:#333;
    background-color:#e6e6e6 !important;
    border-color:#adadad
}

JavaScript

jQuery(function() {
    jQuery('.button-vertical-menu button.button-vertical').on('click', function() {
        jQuery('.button-vertical-menu button').removeClass('active').removeClass('focus');
    });
});