JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<a href="#"><span class="icon fas fa-comment-smile"></span>Al onze vacatures</a>

<script src="https://kit.fontawesome.com/eb10d2ccac.js" crossorigin="anonymous"></script>


<svg viewBox="-0.015 0 14.99 16.9">
<defs>
       <clipPath id="clip" clipPathUnits="objectBoundingBox">
       <path d="M0,1 V0 L0.25,0 H0.25 C0.423,0,0.541,0,0.541,0.039 C0.541,0.157,0.52,0.181,0.707,0.181 C0.999,0.181,0.999,0.197,0.999,0.291 C0.999,0.209,0.999,0.614,0.999,0.843 C0.999,0.929,1,1,0.791,1 H0"/>
       </clipPath>
       </defs>
</svg>

SCSS

* {
  font-family: sans-serif;
}

$color: #000;

$background: #FEC340;
$iconBackground: #FFD57A;

$background-hover: #FA8C40;
$iconBackground-hover: #FEAA40;

@keyframes bounceSize {
  0% {
    height: 11px;
    width: 11px;
    transform: translate(0, 0);
  }
  30% {
    height: 19px;
    width: 19px;
    
    transform: translate(4px, -4px);
   
    }
  68% {
    height: 13px;
    width: 13px;
    transform: translate(1px, -1px);
  }
  72% {
     height: 17px;
    width: 17px;
    
    transform: translate(3px, -3px);
  }
  100% {
    height: 15px;
    width: 15px;
    
    transform: translate(2px, -2px);
  }
}

a {

  --background: #{$background};
  --icon-background: #{$iconBackground};
  --dot-backgrounbd: #{$iconBackground};
  display: inline-flex;
  align-items: center;
  background: var(--background);
  color: $color;
  padding: 6px;
  position: relative;
  border-radius: 5px 0 0 5px;
  text-decoration: none;
  gap: 16px;
  font-size: 18px;
  transition: background 250ms ease;

  .icon {
    height: 52px;
    width: 52px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-background);
    transition: all 250ms ease;

    &:before {
      transform: rotate(0);
    }
  }

  &:before {
    content: '';
    display: block;
    width: 20px;
    height: 100%;
    background: var(--background);
    position: absolute;
    top: 0;
    right: -19px;
    /* clip-path: url(#clip); */
    clip-path: path("M 0 20 V 0 L 5 0 H 5 C 8.46 0 10.84 0 11 2 C 11 5 11 6 14 6 C 20 6 20 6 20 9 C 20 6 20 12.28 20 48 C 20 48 20 50 18 50 H 0");
    transition: background 250ms ease;
  }

  &:after {
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    background: var(--icon-background);
    position: absolute;
    top: -4px;
    right: -25px;
    border-radius: 2px;
    transition: all 250ms ease;
  }


  &:hover {
    --background: #{$background-hover};
    --icon-background:...