JSFiddle - React, Tailwind, and code Playground

HTML

<div class="magazinebookcase">
                                                                                    <div class="books">
        <a style="height:286px;width:16px;" href="">
                <div class="rotate">Book 9</div>
        </a>
        </div>
                <div class="books">
        <a style="height:258px;width:48px;" href="">
                <div class="rotate">Book 10</div>
        </a>
        </div>
                <div class="books">
        <a style="height:252px;width:38px;" href="">
                <div class="rotate">Book 11</div>
        </a>
        </div>
                <div class="books">
        <a style="height:254px;width:34px;" href="">
                <div class="rotate">Book 12</div>
        </a>
        </div>
                <div class="books">
        <a style="height:258px;width:36px;" href="">
                <div class="rotate">Book 13</div>
        </a>
        </div>
                <div class="books">
        <a style="height:258px;width:50px;" href="">
                <div class="rotate">Book 14</div>
        </a>
        </div>
                <div class="books">
        <a style="height:254px;width:52px;" href="">
                <div class="rotate">Book 15</div>
        </a>
        </div>
                <div class="books">
        <a style="height:256px;width:72px;" href="">
                <div class="rotate">Book 16</div>
        </a>
        </div>
                <div class="books">
        <a style="height:258px;width:38px;" href="">
                <div class="rotate">Book 17</div>
        </a>
        </div>
                <div class="books">
        <a style="height:252px;width:40px;" href="">
                <div class="rotate">Book 18</div>
        </a>
        </div>
                <div class="books">
        <a style="height:256px;width:46px;" href="">
                <div class="rotate">Book 19</div>
        </a>
        </div>
                <div class="books">
        <a...

CSS

.magazinebookcase {
    width: 100%;
    padding: 3px;
    float:left;
    } 
    
    .magazinebookcase .clearfix {
    clear:both;
    }
    
    .magazinebookcase .books {
    display: inline-block;
    vertical-align: bottom;
    text-align:center;
    }
    
    .magazinebookcase a {
    border: 1px solid #000;
    display: block;
    font-size: 0.7em;
    }
    
    .magazinebookcase a:hover {
    background-color: #ccc;
    }
    
.rotate {
 -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  position: relative;
  top: 50%;
}