JSFiddle - React, Tailwind, and code Playground

by rydmark

HTML

<div class="wrap">
    <div class="left">Flik 1</div>
    <div class="left">Flik 2</div>
    <div class="left">Flik 3</div>
    <div class="left">Flik 4</div>
</div>

CSS

div.wrap{
    position: relative;
    display: block;
    text-align: center;
}
div.left{
border-right: 1px solid #189028;
    border-top: 1px solid #189028;
    border-left: 1px solid #189028;
    padding-right: 4px;
    padding-top: 2px;
    padding-left: 4px;
    background-color: #bbbbbb;
    overflow: hidden;
    position: relative;    
    float: left;
    clear:both;
    -moz-transform: rotate(270deg);
    -moz-rotation-point: 0 0;
    -webkit-transform: rotate(270deg);
    -webkit-rotation-point: 0 0;
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    height: auto;
    width: auto;
}
h1{
font-weight:bold;
font-size:large;
    vertical-align: middle;
}