JSFiddle - React, Tailwind, and code Playground

by moorthyrweb

HTML

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1>
    <span>We Have 25 Years Of Experience</span>
   </h1>
</div>

CSS

BODY {
  MAX-WIDTH: 500PX;
}

.vc-section-heading {
  text-align: left;
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  padding-top: 0;
  padding-left: 30px;
  padding-right: 30px;
  color: #1a2431;
  font-size: 34px;
}

.vc-section-heading h1 {
  margin-top: 0;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #b18d56;
  margin-top: -0.1em;;
}
.vc-section-heading h1:before {
  content: '[';
  margin-left: -0.8em;
}

.vc-section-heading h1:after {
  content: ']';  
  margin-left: 0.5em;
  right: 0;
}

JavaScript

function fitWidth(el) {
	el.style.width = '';
  // Add 1 to fix floating point error correction
  el.style.width = `${el.children[0].offsetWidth + 1}px`;
  el.style.display = '';
}

const element = document.querySelector('h1');
fitWidth(element);

// If body width is not fixed, you can call it in resize event
window.addEventListener('resize', function() {
	fitWidth(element);
})