JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<a href="#">Click here lange text</a>

<svg width="960px" height="560px" viewBox="0 0 960 560">
    <defs>
       <clipPath id="clip" clipPathUnits="objectBoundingBox" 
       transform="scale(0.00105, 0.00179)">
            <path d="M 960 409.307 v -409.307 h -960 v 558.996 l 328.879 -0.951 C 347.544 558.045 362.819 542.853 362.819 523.752 L 362.234 443.937 C 362.234 424.836 377.152 409.351 395.817 409.351 l 564.183 -0.044 z/>
        </clipPath>
    </defs>
</svg>

SCSS

/* body {
 margin: 0;
 padding: 0;
 
 background-color: #FAFAFA;
opacity: 1;
background-image:  linear-gradient(#F2F2F2 1.7000000000000002px, transparent 1.7000000000000002px), linear-gradient(to right, #F2F2F2 1.7000000000000002px, #FAFAFA 1.7000000000000002px);
background-size: 34px 34px;
}

img {
  max-width:100%;
  height: auto;
}

svg {
  width: 0;
  height: 0;
  overflow: hidden;
}
 */

a {
  display: inline-block;
  background: red;
  color: white;
  padding: 10px 25px 10px 10px;
  position: relative;
  border-radius: 5px 0 0 5px;

  &:before {
    content: '';
    display: block;
    width: 50px;
    height: 100%;
    transform: translateX(100%);
    background: green;
    position: absolute;
    bottom: 0;
    right: 0;
    clip-path: url(#clip);
  }

  &:after {
     content: '';
     display: block;
     width: 10px;
     height: 10px;
     background: blue;
     position: absolute;
     bottom: -5px;
     right: -50px;
     
     border-radius: 2px;
   }
}

JavaScript

o