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, .hide {
  display: none;
}
.activation-key.show {
  display: block;
}
</style>

	<image xlink:href="https://author-logitech-stage.adobecqms.net/content/dam/logitech/k600/background/[email protected]" x="0" y="0"  />
  <g>
    <g id="pulse-fn" class="hide">
        <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>
   ...