How to grow rotated text with tailwind css

Question

I have this html example:

  <div class="h-screen">
    <div class="absolute inset-0 -z-1 bg-black"></div>
    <div class="flex flex-col text-white h-screen">
      <div class="flex justify-between h-full">
        <div class="flex flex-col justify-between space-y-5 w-24">
          <div class="h-2/3 bg-red-300">
            <div class="block origin-left-top transform -rotate-90">
              SUBSCRIBE AND CANCEL ANYTIME ANYWHERE
            </div>
          </div>
          <div class="flex flex-col items-center space-y-5">
            <div class="pb-5">
              <button
                class="border-white flex items-center justify-center border-2 w-10 h-10"
              >
                <i-uil-comment-alt-dots />
              </button>
            </div>
          </div>
        </div>
        <div>mid</div>
        <div class="w-24">right</div>
      </div>
    </div>
  </div>

I would like text to look it like this:

but for some reason it does not take all space, like this:

Answer 1

You must set writing-mode to vertical-rl, then rotate 180°

<div className="rotate-180 bg-black text-white"
  style={{ writingMode: 'vertical-rl' }}
>
  SUBSCRIBE AND CANCEL ANYTIME ANYWHERE
</div>

Answer 2

You have way too much HTML in there for such a simple task. Start with this, it will give you basics of what you need

<div class="transform -rotate-90 bg-black text-white">SUBSCRIBE AND CANCEL ANYTIME ANYWHERE</div>