JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div><p>ああああああああああああああ</p></div>
<div><p>いいいいいいいいいいいいいい</p></div>
<div><p>うううううううううううううう</p></div>
<div><p>ええええええええええええええ</p></div>
<div><p>おおおおおおおおおおおおおお</p></div>
<div><p>かかかかかかかかかかかかかか</p></div>
<div><p>きききききききききききききき</p></div>
<div><p>くくくくくくくくくくくくくく</p></div>
<div><p>ここここここここここここここ</p></div>

CSS

*{margin: 0;padding: 0;}
div{
    display: inline-block;
    width: 100px; height: 100px;
    border: 1px solid;
    background-color: gold;
}

body{
    /* 文書の方向を縦書で左から右に流れるようにする */
    -ms-writing-mode: tb-lr;/* old syntax */
    -ms-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    
    /* グリフを起こす */
    -ms-text-orientation: upright;
    -webkit-text-orientation: upright;
    -moz-text-orientation: upright;
    text-orientation: upright;
}

p{
    /* 文書の方向を縦書で左から右に流れるようにする */
    -ms-writing-mode: lr-tb;/* old syntax */
    -ms-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -moz-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
}