JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="helloplugin" data-color="red"></div>
<div class="helloplugin" data-color="blue"></div>
<div class="helloplugin" data-color="green"></div>

CSS

.nav{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    float: left;
}
.nav li{
    display: inline-block;
    position: relative;
    float: left;
    padding: 0 15px;
}
.nav li::after {
    position: absolute;
    width: 2px;
    right: 0;
    content: ' ';
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}
.nav li:last-child::after {
   width: 0;
}

JavaScript

(function($) {
  $.fn.helloplugin = function() {
  	let myDivs = this;
    for(let i = 0, len = myDivs.length; i < len; i += 1) {
    	let color = $(myDivs[i]).data('color');
        $(myDivs[i]).html('<h2>Hello jQuery</h2>').css('color', color);
    }
  }
}(jQuery));

$('.helloplugin').helloplugin();