JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search">
<input type="button" id="button" onmousedown="doSearch(document.getElementById('search').value)" value="Find">

<div id="content">
    <p>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="663px" height="663px">
            <image xlink:href="http://webfro.gs/south/kb2/images/bunny.jpg" x="0" y="0" width="663" height="663" />
          <circle class="office" cx="504" cy="124" r="94" />
                      <circle class="fire-exit" cx="168" cy="150" r="97" />
            <circle class="main-exit" cx="378" cy="589" r="48" />
    </svg>
    </p>


	<div class="office">office</div>
    <div class="cubicle">cube</div>
	<div class="office">office</div>
    <div class="bathroom">bathroom</div>
    <div class="cubicle">cube</div>
	<div class="office">office</div>
    <div class="cubicle">cube</div>
    <div class="bathroom">bathroom</div>    
	<div class="office">office</div>
    <div class="cubicle">cube</div>
	<div class="office">office</div>
    <div class="fire-exit">fire exit</div>
    <div class="cubicle">cube</div>
	<div class="office">office</div>
    <div class="cubicle">cube</div>
    <div class="main-exit">main exit</div>
	<div class="office">office</div>
    <div class="cubicle">cube</div>

</div>

CSS

.office { width: 50px; height: 50px; border: 1px solid black; position: relative;}

.cubicle { width: 50px; height: 50px; border: 1px solid black; position: relative; }

.bathroom { width: 50px; height: 50px; border: 1px solid black; position: relative; }

.main-exit { width: 50px; height: 50px; border: 1px solid black; position: relative; }

.fire-exit { width: 50px; height: 50px; border: 1px solid black; position: relative; }
circle { stroke:none; fill:none; }
.highlight { background-color: yellow; }
.highlightsvg { fill: yellow; }

JavaScript

function doSearch(text) {
    var svgns="http://www.w3.org/2000/svg";
    var areas = document.getElementsByTagNameNS(svgns, 'circle');
    $(areas).each(function(elem) {
        if(areas[elem].className.baseVal === text) {
            areas[elem].className.baseVal += ' highlightsvg';
        } else {
            areas[elem].className.baseVal = areas[elem].className.baseVal.replace(' highlightsvg', '');
        }
            
    });
    $('#content div').removeClass('highlight');
    $('#content div:contains(' + text + ')').addClass('highlight');
    //$('#content div:contains(' + coords + ')').addClass('highlight');
    
}