JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<div class="image-w bitmap-logo">
    <img src="http://placehold.it/400x200" alt="" />
</div>



<div class="image-w svg-logo">
    

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 743.9 457.7" enable-background="new 0 0 743.9 457.7" xml:space="preserve">
<g id="Layer_1">
</g>
<g id="Layer_2">
	<g>
		<path fill="#FF5311" class='svg-box' d="M663.7,381.4H165c-6.6,0-12-5.4-12-12V99.9c0-6.6,5.4-12,12-12h498.8c6.6,0,12,5.4,12,12v269.5
			C675.7,376,670.3,381.4,663.7,381.4z"/>
		<g>
			<g>
				<path fill="#33FF00" class='svg-squigle'...

CSS

/* global / overall image styles */
.image-w img, .image-w svg {
    display: block;
    width: 100%;
    height: auto;
}

svg path { /* good preset for svg / sets 'fill' to casdade like color */
    fill: currentColor;
}  


/* specific image styles */

.bitmap-logo { /* things you might do with your bitmap */
    max-width: 200px;
    transform: rotate(10deg);
    opacity: .2;
    border: 2px solid red;
    box-shadow: 1px 2px 20px 0 red;
}

.svg-logo { /* svg */
    max-width: 300px;
}

.svg-box { /* parts of the svg */
    color: blue;
}

.svg-squigle {
    color: red;
}
















/* unimportant */

html {
    background: lightblue;
}

.image-w {
    margin-bottom: 2rem;
}