JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<h1>Palavras aos Saltos</h1>
<ul class="jumpingList">
  <li>Posts</li>
  <li>Portfolio</li>
  <li>Projects</li>
  <li>Postas</li>
</ul>


<h1>Palavras Fixas à Esquerda</h1>
<ul class="fixedList">
  <li><span class="light">Posts</span><span class="bold">Posts</span></li>
  <li><span class="light">Portfolio</span><span class="bold">Portfolio</span></li>
  <li><span class="light">Projects</span><span class="bold">Projects</span></li>
  <li><span class="light">Postas</span><span class="bold">Postas</span></li>
</ul>

SASS

*
  font-family: Roboto, Helvetica, Arial, sans-serif


li
  display: inline
  margin: 0 20px
  
  
.jumpingList
  li
    font-weight: 200
    cursor: pointer

    &:hover
      font-weight: 600

.fixedList
  li 
    position: relative
    cursor: pointer
    
  .light
    font-weight: 200
   
  
  .bold  
    top: 0
    left: 0
    position: absolute
    font-weight: 800
    visibility: hidden
  
    
  li:hover 
    .light
      visibility: hidden
    .bold
      visibility: visible

    
    
    
// --------- Desnecessário ---------

h1
  margin: 30px 20px 10px
  font-size: 2em
  font-weight: 600