JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style>

#room1:hover {
    fill: #ffcccb;
}


</style>
</head>
<body>

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
	<rect id="room1" x="0.5" y="0.5" width="93" height="99" style="fill:#fff"/>
	<path d="M128,44v98H36V44h92m1-1H35V143h94V43Z" transform="translate(-35 -43)"/>
	<rect id="room2" x="93.5" y="0.5" width="56" height="99" style="fill:#fff"/>
	<path d="M184,44v98H129V44h55m1-1H128V143h57V43Z" transform="translate(-35 -43)"/>
</svg>

</body>
</html>