JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
		<li>
			<svg viewBox='0 0 100 58.07860262'>
				<defs>
					<clipPath id="promo5-1-image">
						<polygon points="0,0 100,0 100,50.87336245 0,58.07860262" />
					</clipPath>
				</defs>
				<image x="0" y="0" width="100" height="58.07860262" xlink:href="http://svgtest.tbb.dev.novicell.dk/test.jpg" src="http://svgtest.tbb.dev.novicell.dk/test.jpg" />
			</svg>
		</li>
	</ul>

CSS

ul{margin:0;padding:0;list-style:none;width:100%;height:510px;position: relative;width:1140px;}
	li{margin:0;padding:0;position:absolute;background:blue;width:40.1754386%;height:52.15686275%;overflow:hidden;top:0;left:0;}	
	svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;overflow:hidden;}


	image{clip-path: url(#promo5-1-image);}