JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<nav>
      <div class="button"><p class="rotare">1</p></div>
      <div class="button"><p class="rotare">2</p></div>
      <div class="button"><p class="rotare">3</p></div>
      <div class="button"><p class="rotare">4</p></div>
</nav>

CSS

nav {
    width: 50px;
    background-color: red;
    margin-left: 0px;
    top:0px;
    position: relative;
    display: inline-block;
    float:left;
}

.button {
    width: 50px;
    height: 150px;
    margin: 10px 0;
    background-color: pink;
    position: relative;
    display: table;
}

.rotare {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
}