JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<my-component name="web component"></my-component>

<div class="my-component" data-name="jquery"></div>

JavaScript

function vanillaComponent(element, options) {
	element.innerHTML = `Hello ${options.name}!`;
}

// Web component
class MyComponent extends HTMLElement {
	connectedCallback() {
  	vanillaComponent(this, {
	    name: this.getAttribute('name')
    });
  }
}
customElements.define('my-component', MyComponent);

// Jquery
$.fn.myComponent = function(options) {
	this.each(function() {
  	vanillaComponent(this, $(this).data());
  })
}

$(document).ready(function() {
	$('.my-component').myComponent();
})