JSFiddle - React, Tailwind, and code Playground

by cjake

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="col-sm-4">
  <div id="sideNavLeft" onclick="location.href='We`enter code here`bshop.aspx';" style="cursor: pointer;">
      <a href="#" class="Links">WEBSHOP</a>
  </div>
</div>

CSS

#sideNavLeft a {
  position: fixed;
  
  top:-6px;
  bottom:-52px;
  
  padding: 1em;
  
  /* I would suggest using a fixed width to always have the same amount of text showing */
  width: 10%;
  
  color: white;
  font-size: 20px;
  background-color: #696969;
  text-decoration: none;
  
  /* Used transform instead of 'left' for a smoother animation */
  /* Read : https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 */
  transform: translateX(-100px);
  transition: 0.3s;
  
  /* Used flexbox to be able to align the text to the right side */
  display: flex;
  
  /* Optional : entering the text along the vertical axis */
  justify-content: center;
}

#sideNavLeft a span {
  /* Aligns the text to the right of its flexbox container */
  margin-left: auto;
}

#sideNavLeft a:hover {
  transform: translateX(0);
}

.Links {
    writing-mode: vertical-lr;
    text-orientation: upright;
    text-align:center;
}