JSFiddle - React, Tailwind, and code Playground

HTML

<div id="recent">
  <div class="widget">
    <h3 class="title">
      [icon=user]
      user
    </h3>
  </div>
  <div class="widget">
    <h3 class="title">
      [icon=facebook]
      facebook
    </h3>
  </div>
  <div class="widget">
    <h3 class="title">
      [icon=twitter]
      twitter
    </h3>
  </div>
</div>

JavaScript

function sidebarShortCode(e) {
	    var t = $(e).html(),
		t = t.replace(/\[icon=(.*?)\]/gi, "<span id='icon'><i class='fa fa-$1'></i></span>");
		$(e).html(t);
}
  sidebarShortCode("#recent .widget h3.title");