JSFiddle - React, Tailwind, and code Playground

by tbbtester

HTML

<ul>
	              <li>
									<div>
									<svg viewBox='0 0 100 58.07860262' preserveAspectRatio="none"><image  x="0" y="0" width="100" height="58.07860262" xlink:href="http://svgtest.tbb.dev.novicell.dk/test.jpg" />
                                        <clipPath id="promo5a-1-image"><polygon points="0,0 100,0 100,50.87336245 0,58.07860262" /></clipPath>
							         <clipPath id="promo5a-1-rect"><polygon points="0,44.10480349 100,48.47161572 100,50.87336245 0,58.07860262" /></clipPath>
	                	
	                		<rect x="0" y="0" height="58.07860262" width="100" />
	                		<text x="5" y="92">Bla</text>
									</svg></div>
     </li></ul>

CSS

ul{list-style:none;margin:0;padding:0;width:458px;height:266px;position: relative;background:red;}
li{margin:0;padding:0;position:absolute;width:100%;top:0;background:teal;}
div{height:0;position: relative;padding-top:100%;background:orange;}
image{display:block;clip-path: url(#promo5a-1-image);}
text{font-size:14px;fill:#fff;}
rect{clip-path: url(#promo5a-1-rect);fill:green;}
svg{display:block;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;top:0;left:0;background:blue;}