JSFiddle - React, Tailwind, and code Playground

by Steven Munro

HTML

<div class="elsie">

<svg 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"
   width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
	<mask id="logo_mask" maskUnits="objectBoundingBox">
		<path fill="#FFFFFF" d="M50.905,40.832c57.905-52.508,147.447-50.833,203.322,5.042c55.874,55.871,57.548,145.419,5.037,203.319
			l-44.971-44.974c27.784-33.043,26.183-82.406-4.906-113.506c-31.103-31.092-80.466-32.697-113.507-4.903L50.905,40.832z"/>
		<path fill="#FFFFFF" d="M203.957,214.556c-33.043,27.794-82.409,26.193-113.505-4.906c-31.101-31.097-32.701-80.466-4.912-113.509
			L40.568,51.17c-52.512,57.903-50.833,147.444,5.042,203.318c55.873,55.882,145.414,57.556,203.32,5.042L203.957,214.556z"/>
	</mask>
</defs>
<g>
	<path fill="#C1553B" d="M50.905,40.832c57.905-52.508,147.447-50.833,203.322,5.042c55.874,55.871,57.548,145.419,5.037,203.319
		l-44.971-44.974c27.784-33.043,26.183-82.406-4.906-113.506c-31.103-31.092-80.466-32.697-113.507-4.903L50.905,40.832z"/>
	<path fill="#404041" d="M203.957,214.556c-33.043,27.794-82.409,26.193-113.505-4.906c-31.101-31.097-32.701-80.466-4.912-113.509
		L40.568,51.17c-52.512,57.903-50.833,147.444,5.042,203.318c55.873,55.882,145.414,57.556,203.32,5.042L203.957,214.556z"/>
</g>
</svg>
    
    <img src="http://placehold.it/350x150">
    
</div>

CSS

.elsie {
    background-color: red;
    position:relative;
    text-align: center;
}

.elsie svg {
    position:absolute;
    height: 100%;
}