JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
<svg height="0" width="0">
<defs>
<clipPath id="clip">
<!-- clipPathUnits="objectBoundingBox" -->
<!-- transform="scale(0.1 0.2)" viewBox="0 0 32 64"  -->
<path d="M26.703 0l-11.058 2.669-10.72-2.254v0.027l-2.603 1.646-2.322 1.813 1.583 3.489 1.206 9.7-1.782 2.044 0.333 3.244-1.34 4.89 4.925 4.315 10.16-2.254 4.273 2.669 7.91-0.026 15.276-1.799 4.177 1.071 4.088-3.846 0.333-3.244-1.782-2.044 1.206-9.7 1.583-3.489-2.322-1.814-2.664-6.466-18.521 1.556-0.143-2.173z"/>
</clipPath>
<mask id="mask" style=""  maskUnits="objectBoundingBox" width="100%" height="100%">
<path style="transform: scale(300%, 200%);mask-size: contain;" d="M26.703 0l-11.058 2.669-10.72-2.254v0.027l-2.603 1.646-2.322 1.813 1.583 3.489 1.206 9.7-1.782 2.044 0.333 3.244-1.34 4.89 4.925 4.315 10.16-2.254 4.273 2.669 7.91-0.026 15.276-1.799 4.177 1.071 4.088-3.846 0.333-3.244-1.782-2.044 1.206-9.7 1.583-3.489-2.322-1.814-2.664-6.466-18.521 1.556-0.143-2.173z" fill="#fff"/>
</mask>
</defs>
</svg>


<div class="relative bg-white overflow-hidden">
  <div class="max-w-screen-xl mx-auto ">
    <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
      <svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="50,0 100,0 50,100 0,100" />
      </svg>

      <div class="relative pt-6 px-4 sm:px-6 lg:px-8">
        <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start">
          <div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
            <div class="flex items-center justify-between w-full md:w-auto">
              <a href="#">
                <img class="h-8 w-auto sm:h-10" src="/img/logos/workflow-mark-on-white.svg" alt="" />
              </a>
              <div...

CSS

.c-button {
  clip-path: url(#clip);
}
.d-button {
  mask: url(#mask);
  /* mask-border: url("#mask"); */
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.mask {
  width: 1.6298828125em;
}