JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="0" height="0" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 807 101.8" style="enable-background:new 0 0 807 101.8;" xml:space="preserve">
  <clipPath clipPathUnits="objectBoundingBox" id="torn-paper">
    <path d="M1 0v0.9801980198019802c-0.001734820322180917 -0.0019801980198019802 -0.003469640644361834 -0.0019801980198019802 -0.005204460966542751 0.005940594059405941c-0.00024783147459727387 0.0009900990099009901 -0.0006195786864931846 -0.0009900990099009901 -0.0009913258983890955 -0.0009900990099009901c-0.0013630731102850064 0 -0.002850061957868649 -0.0009900990099009901 -0.004213135068153655 0c-0.001734820322180917 0.0019801980198019802 -0.003345724907063197 0.00693069306930693 -0.005080545229244114 0.007920792079207921c-0.002973977695167286 0.0019801980198019802 -0.00607187112763321 0.0019801980198019802 -0.009045848822800495 0.0019801980198019802c-0.0013630731102850064 0 -0.002850061957868649 -0.0009900990099009901 -0.004213135068153655 0c-0.004708798017348203 0.0029702970297029703 -0.009169764560099132 0.017821782178217824 -0.013878562577447335 0.009900990099009901c-0.0007434944237918215 -0.0009900990099009901 -0.001486988847583643 0.0009900990099009901 -0.0023543990086741014 0c-0.0026022304832713757 -0.0019801980198019802 -0.005452292441140026 -0.0009900990099009901 -0.0076827757125154895 -0.009900990099009901c-0.0026022304832713757 -0.010891089108910892 -0.005080545229244114 -0.012871287128712872 -0.007806691449814126 -0.01386138613861386c-0.005947955390334572 -0.0029702970297029703 -0.011895910780669145 -0.007920792079207921 -0.017967781908302356 -0.011881188118811881c-0.0021065675340768276 -0.0009900990099009901 -0.004213135068153655 0.0009900990099009901 -0.006195786864931847 -0.0009900990099009901c-0.005204460966542751 -0.005940594059405941 -0.010408921933085503 -0.019801980198019802...

SCSS

.foo {
  clip-path: url(#torn-paper);
  width: 100%;
  height: 101px;
  background: blue;
  transform: scaleX(-1);
}
.bar {

}