JSFiddle - React, Tailwind, and code Playground

by gentou

HTML

<a class="cross">
  <span class="one"></span>
  <span class="two"></span>
</a>

SCSS

.cross{
  display: block;
  position: relative;
  width: 100px;
  background-color: red;
  &:after{
    content: "";
    display: block;
    padding-bottom: 100%;
  }
}

.one , .two{
  position: absolute;
  height: 5px;
  width: 141%;
  background-color: green;
}
 .one{
    transform-origin: left top;
  transform: translateY(-1px) rotate(45deg)
 }
 
 .two{
   transform:translateY(-1px) translateX(-29.285714%) rotate(-45deg);
   transform-origin: right top;
 }