JSFiddle - React, Tailwind, and code Playground

by momenelkamri

HTML

<ul>
<li>
  <button>
 test 1
</button>
</li>
<li>
<button class="unbutton menu-button">
  <span class="alt">logged in with:</span>
  <span class="menu-button-text menu-button-text--full">
      <span class="h-acc-visible-l" data-email="long" >[email protected]</span>
  </span> 
</button>  
</li>
<li>
<button>
   test 2
</button>  
</li>
</ul>

SCSS

/* base */
html, body {
  padding: 20px;
}
ul {
  display: flex;
}
li {
  position: relative;
}
button {
  margin: 10px;
}

.menu-button {
    display: inline-block;
    
    position: relative;
    color: #003082;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.5625rem;
    width: 85px;
    text-align: left;
    
    &:focus {
      &::after {
        content: '';
        display: block;
        position: absolute;
        
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        
        border-radius: 4px;
        border: 1px solid blue;
        box-shadow: 0 0 0 1px #0063d3, 0 2px 28px rgba(#000, 0.1);
      }
      
      outline: none;
    }
}


.menu-button-text {
    margin-right: 0;
    
    &::before {
      content: "";
      height: 2.1875rem;
      width: 2.1875rem;
      position: absolute;
      left: -3px;
      top: -4px;
    }
}

[data-email=long] {
  display: inline-block;
  width: 68px;
  overflow-x: hidden;
  vertical-align: top;

   &::after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 3rem;
     height: 100%;
     z-index: 1;
     opacity: 1;
     background: linear-gradient(90deg,hsla(0,0%,100%,0),#fff 90%);
   }
}

/* utils */
.unbutton {
    border: none;
    background: none;
    padding: 0;
}

.alt {
  position: absolute;
-webkit-clip-path: polygon(0 0,0 0,0 0,0 0);
  clip-path: polygon(0 0,0 0,0 0,0 0);
  width: 1px;
  height: 1rem;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* .h-acc-hidden-l {
    position: absolute;
    -webkit-clip-path: polygon(0 0,0 0,0 0,0 0);
    clip-path: polygon(0 0,0 0,0 0,0 0);
    width: 1px;
    height: 1rem;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

.h-acc-visible-l {
    position: static;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    width: auto;
    overflow: initial;
    white-space: normal;
} */