JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="585" width="780" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
	<g transform="translate(-5,-272.86218)">
		<image xlink:href="http://i.imgur.com/DI1nKWb.jpg" height="585" width="780" y="272.86" x="5"/>
	</g>
	<g>
		<g transform="translate(55,20)">
			<path opacity="0.2" d="m455,191a83,83,0,1,1,-166,0,83,83,0,1,1,166,0z" transform="matrix(0.12048193,0,0,0.12048193,82.776843,103.69677)" fill="#0394cd"/>
			<path d="m455,191a83,83,0,1,1,-166,0,83,83,0,1,1,166,0z" transform="matrix(0.09638554,0,0,0.09638554,91.740698,108.29918)" fill="#0394cd"/>
			<path d="m455,191a83,83,0,1,1,-166,0,83,83,0,1,1,166,0z" transform="matrix(0.07228916,0,0,0.07228916,100.70456,112.90159)" fill="#ffffff"/>
		</g>
		<rect rx="16" ry="16" height="112" width="752" y="457" x="16" fill="#ffffff"/>
		<text style="writing-mode:lr-tb;letter-spacing:0px;text-anchor:start;word-spacing:0px;text-align:start;" line-height="125%" font-weight="normal" font-size="24px" font-style="normal" font-stretch="normal" font-variant="normal" y="486.21353" x="31.648438" font-family="Fjord One" xml:space="preserve" fill="#0394cd"><tspan y="486.21353" x="31.648438"><tspan line-height="125%" y="486.21353" x="31.648438" font-family="Fjord One" fill="#0394cd">Western Digital Passport</tspan></tspan></text>
		<text style="writing-mode:lr-tb;letter-spacing:0px;text-anchor:start;word-spacing:0px;text-align:start;" line-height="125%" font-weight="normal" font-size="16px" font-style="normal" font-stretch="normal" font-variant="normal" y="392.66696" x="-70.003571" font-family="Arial" xml:space="preserve" fill="#000000"><tspan y="392.66696" x="-70.003571"/></text>
		<text style="writing-mode:lr-tb;letter-spacing:0px;text-anchor:start;word-spacing:0px;text-align:start;" line-height="125%" font-weight="normal" font-size="16px"...

CSS

g > text, g > rect {
    opacity: 0;
    -webkit-transition: opacity 500ms;
}
g > g {
    cursor: pointer;
}
g > g:hover ~ text, g > g:hover ~ rect {
    opacity: 1;
}