JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<div role="button" tabindex="0" class="activate-button">
  <div class="activate-button-text">
    <p>ÉvaluationÉvaluationÉvaluationÉvaluation</p>
  </div>
  <div class="activate-button-arrow">
    <span class="foo"> 
        &lt;
    </span>
   </div>
</div>

CSS

.activate-button {
  position: fixed;
  right: 0;
  top: 30%;
  transition-duration: 0.4s;
  color: #fff;
  cursor: pointer;
  width: 40px;
  height: auto;
  background-color: #0070ba;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
  z-index: 9999;
}

.activate-button-text > p {
  margin: 0;
  padding: 0.5rem 0;
  line-height: 40px;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.activate-button-arrow {
  align-self: center;
}