JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
			<div class="inner">
				<svg viewBox='0 0 100 3.2' preserveAspectRatio="none">
					<rect x="0" y="0" height="3.2" width="100"/>
				</svg>
			</div>
		</div>

CSS

body{margin:0;padding:0;background:orange;}
.top {position: absolute;width: 100%;}
.inner{height:0;position: relative;padding-top:3.2%;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;}
rect{stroke:none;fill:teal;}