JSFiddle - React, Tailwind, and code Playground

by ekeyte

HTML

<div>
  <span class="move-tools">
    <a href title="Move to bottom">Move to bottom</a>
    <a href title="Move down one place">Move down</a>
    <a href title="Move up one place">Move up</a>
    <a href title="Move to top">Move to top</a>
  </span>
</div>

SCSS

.move-tools {
  > a {
    opacity: 0.0;
    
    a ~ a:hover {
      opacity: 1.0;
      transition: opacity 0.8s ease-in-out;
    }
    
    &:hover {
      opacity: 1.0;
      transition: opacity 0.5s ease-in-out;
    }
  }
}