JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top-streets">
<div class="parking">PARKING</div>
<div class="horizantal">
<div class="price">
220$
</div>
<div class="street-name-top">
STRAND
</div>
<div class="red-kart horizantal-min"></div>
</div>
<div class="horizantal">
<div class="price">
220$
</div>
<div class="street-name-top">
KENTAKY AVENUE
</div>
<div class="red-kart horizantal-min"></div>
</div>
<div class="horizantal">
<div class="price">
220$
</div>
<div class="street-name-top">
FLEET STREET
</div>
<div class="red-kart horizantal-min"></div>
</div>
<div class="horizantal">
<div class="price">
240$
</div>
<div class="street-name-top">
TRAFLEGAR SQUARE
</div>
<div class="red-kart horizantal-min"></div>
</div>
</div>
CSS
.parking {
width: 150px;
height: 150px;
border: 1px solid #000;
float: left;
}
.top-streets {
background: aliceblue;
width: 850px;
height: 180px;
}
.horizantal {
background: aquamarine;
position: relative;
border: 1px solid #000;
width: 100px;
height: 150px;
float: left;
text-align: center;
}
.street-name-top {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
position: relative;
width: 100px;
height: 50px;
top: 60px;
}
.price {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: 10px;
position: relative;
text-align: center;
width: 100px;
height: 20px;
}
.horizantal-min {
width: 100px;
height: 20px;
border-top: 2px solid #000;
position: relative;
}
.red-kart {
background: red;
position: absolute;
bottom: 0;
}