JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="card">
  
  <div class="side">
    <div class="side-content">
      <p>lorem ipsum</p>
      <p>dolor sit amet
      </p>
    </div>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}


.card{
  margin: 100px;
  background: #ccc;
  height: 400px;
  display: flex;
  
  .side {
    width: 140px;
    padding-top: 85px;
    
    .side-content {
            
      transform: rotate(90deg) translateY(-140px);
      transform-origin: top left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 140px;    

      
      p {
        font-size: 42px;
        white-space: nowrap
      }
       
      
    }
  }
}