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</p>
  </div>
  <div class="activate-button-arrow">
    <span class="foo"> 
        hh
    </span>
   </div>
</div>

CSS

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

.activate-button-text {
    width: 100%;
    line-height: 20px;
    padding-top: 36px;
    padding-bottom: 5px;
    transform: rotate(-90deg);
}