JSFiddle - React, Tailwind, and code Playground

by qwweee7467

HTML

<div style="bottom: 0; position: fixed; right: 20px; ">
    <div class="vertical-rl">購物車</div>
    <div>4</div>
    <div class="vertical-rl">件</div>
</div>
<div style="top: 0; position: fixed; right: 20px; ">
<span style="writing-mode:tb-rl">
  購<br />
  物<br />
  車<br />
  4<br />  
  件<br />
</span>

</div>
<table style="top: 50px; position: fixed; left: 20px; ">
    <tbody>
        <tr>
            <td>購</td>
        </tr>
        <tr>
            <td>物</td>
        </tr>
        <tr>
            <td>車</td>
        </tr>
        <tr>
            <td>4</td>
        </tr>
        <tr>
            <td>件</td>
        </tr>
    </tbody>
</table>

CSS

.vertical-rl {
    -webkit-writing-mode: vertical-rl;
    direction: rtl;
    writing-mode: tb-rl;
}