JSFiddle - React, Tailwind, and code Playground
by karthick6891
HTML
<svg version="1.1" viewBox="0 0 1400 452"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.activation-key {
display: none;
}
.activation-key.show {
display: block;
}
</style>
<image xlink:href="https://author-logitech-stage.adobecqms.net/content/dam/logitech/k600/background/Kyoto_home.png" x="0" y="0" />
<g>
<g id="pulse-fn">
<circle fill="rgb(100,92,128,0.5)" cx="195" cy="388.9" r="29"></circle>
<circle cx="195" cy="388.9" r="30" stroke="white" stroke-width="3.5" fill="none"></circle>
<circle cx="195" cy="388.9" r="35" stroke="#814EFA" stroke-width="4.5" fill="none"></circle>
</g>
<g id="pulse-1" class="activation-key">
<circle fill="rgb(100,92,128,0.5)" cx="195" cy="109.9" r="29"></circle>
<circle cx="195" cy="109.9" r="30" stroke="white" stroke-width="3.5" fill="none"></circle>
<circle cx="195" cy="109.9" r="35" stroke="#814EFA" stroke-width="4.5" fill="none"></circle>
</g>
<g id="pulse-2" class="activation-key">
<circle fill="rgb(100,92,128,0.5)" cx="265" cy="109.9" r="29"></circle>
<circle cx="265" cy="109.9" r="30" stroke="white" stroke-width="3.5" fill="none"></circle>
<circle cx="265" cy="109.9" r="35" stroke="#814EFA" stroke-width="4.5" fill="none"></circle>
</g>
<g id="pulse-3" class="activation-key">
<circle fill="rgb(100,92,128,0.5)" cx="333" cy="109.9" r="29"></circle>
<circle cx="333" cy="109.9" r="30" stroke="white" stroke-width="3.5" fill="none"></circle>
<circle cx="333" cy="109.9" r="35" stroke="#814EFA" stroke-width="4.5" fill="none"></circle>
</g>
<g id="pulse-4" class="activation-key">
<circle fill="rgb(100,92,128,0.5)" cx="403" cy="109.9" r="29"></circle>
<circle cx="403" cy="109.9" r="30" stroke="white" stroke-width="3.5" fill="none"></circle>
<circle cx="403" cy="109.9" r="35" stroke="#814EFA" stroke-width="4.5" fill="none"></circle>
</g>
<g...