JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
Hover Pattern (later to be convereted to pop-over)
</h2>
This is the reference for bible <scripture-cite book="bible" chapter="1" verse="3"></scripture-cite> followed by a reference for bhagwad gita as 
<scripture-cite book="bhagdwadgita" chapter="3" verse="3-5"></scripture-cite> and not leaving quaran also 

<scripture-cite book="quran" chapter="2" verse="5"></scripture-cite>.

<br/><br/><br/>
<h2>
Embosed pattern
</h2><br/>
<div>

<scripture-cite book="quran" chapter="2" verse="5" embosed></scripture-cite>
</div>
</div>

CSS

scripture-cite {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}

scripture-cite::shadow .inner-a {
  color:#ff0000;
  text-decoration:none;
}

JavaScript

// Create a new object based of the HTMLElement prototype
const ScriptureCite = Object.create(HTMLElement.prototype);

//A dummy dict in real time this will fetched from API
const dictObj = {
bible : `1:3 And God said, “Let there be light,” and there was light.`,
bhagdwadgita : `3:3 There is no one who can remain without action even for a moment. Indeed, all beings are compelled to act by their qualities born of material nature (the three guṇas). \n 4 Those who restrain the external organs of action, while continuing to dwell on sense objects in the mind, certainly delude themselves and are to be called hypocrites. \n 5 But those karm yogis who control their knowledge senses with the mind, O Arjun, and engage the working senses in working without attachment, are certainly superior.`,
quran : `2:5 These are upon guidance from their Lord. These are the successful.`
}

// Set up the element.
ScriptureCite.createdCallback = function() {
    // Create a Shadow Root
    const shadow = this.createShadowRoot();
		
    if(this.hasAttribute("embosed")){
    	const div = document.createElement('a');
      div.style.backgroundColor = "#999999";
      div.style.width = "100%";
      div.style.padding = "25px";
      div.innerText = this.getAttribute('book') + dictObj[this.getAttribute('book')];

      // Add the image to the Shadow Root.
      shadow.appendChild(div);
    }else{
      // Create a standard img element and set it's attributes.
      const a = document.createElement('a');
      a.href = "http://www.vinodlouis.com";
      a.className = "inner-a";
      a.innerText = this.getAttribute('book') + " " + this.getAttribute('chapter') + ' : ' + this.getAttribute('verse');

      // Add the image to the Shadow Root.
      shadow.appendChild(a);

      // Add an event listener to the image.
      a.addEventListener('mouseenter', (e)=> {
           a.title = dictObj[this.getAttribute('book')]
      });
    }  
};

// Register the new element.
const XProduct =...