JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<img src="https://imgflip.com/s/meme/Oblivious-Hot-Girl.jpg"  />
<p>
  hello everybody !!!
</p>
</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="filter1" x="0" y="0">
      <!--<feGaussianBlur in="SourceGraphic" stdDeviation="20" />-->
     <!--<feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />-->
    <!--<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />  -->  
    <!--<feColorMatrix type="matrix" values="
                                          0 0 0 0 0
                                          1 1 1 1 1
                                          0 0 0 0 0
                                          0 0 0 1 0" />-->
    <!--<feConvolveMatrix order="3" kernelMatrix="-1 0 0 0 0 0 0 0 1" />-->
      <!-- posterize-->
      <!--<feMorphology operator="errode" radius="3" />-->
      <!--<feOffset result="someShadow" dx="3" dy="10"/>
      <feColorMatrix type="matrix" result="matrixOut" in="someShadow" values="0 0 0 0 0 0 0 0 0 0 0.5 0"
      <feGaussianBlur result="someBlur" in="matrixOut" stdDeviation="4" />
      <feBlend in="SourceGraphic" in2="someBlur" mode="normal"  />-->
    </filter>
  </defs>
</svg>

CSS

img { -webkit-filter: url(#filter1) }
p {font-weigh:bold;font-family:Arial Black, sans-serif;font-size:50px;text-transform:uppercase;-webkit-filter: url(#filter1)}