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>
<pattern id="img1" patternUnits="userSpaceOnUse"  width="200" height="300">
    <image xlink:href="https://picsum.photos/200/300" x="0" y="0" width="200" height="300" />
  </pattern>
<symbol id="mask" width="100%" height="100%" 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" fill="url(#img1)"/>
</symbol>
</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 class="-mr-2 flex items-center md:hidden">
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                  <svg class="h-6 w-6"...

CSS

.icon.icon-file-text {

  display: block;
position: absolute;
width: 100px;
height: 100px;
z-index: -1;

}
/* .d-button:before {
  content: url(#mask);
  display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
 */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.mask {
  width: 1.6298828125em;
}