JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="overlay-img2">
<svg class="overlay-img">
<clipPath id="Layer_1-2"><path d="M526.8,143.5c-3.5,6.9-8.7,12.8-15.1,17.2c-9.2,6.1-18.7,9.2-35.5-1.5c-3.1-2-6-5.1-9.1-7
	c-14-8.5-49.1-30.1-58.7-38.2l-382.2,1C12.3,115,1,103.9,1,90.1c0,0,0,0,0-0.1l0,0c0-18.1,14.6-32.8,32.7-32.8l372-1l66.2-46.5
	c0,0,32.6-26.5,52.5,13C524.4,22.7,557,84.4,526.8,143.5z M405.7,56.7l0.6,56.9l41.6,26.8l-13-14.3l15.8,4.5l-17.7-18l12.2-0.6
	l-17.4-14.4l13.8-1.2l-12-8.3l11.6-4.8l-10.3-4.3l18.5-4l-20.4-4l13.5-13.3l-17.7,0.6l10.2-10.1l-7,2.7l14.6-19.1L405.7,56.7z"/></clipPath>
</svg>
<svg class="overlay-img" viewBox="0 0 595 167.33"><g id="Layer_2" data-name="Layer 2"><g data-name="Layer 1"><path class="cls-1" d="M526.81,143.6a45.18,45.18,0,0,1-15.15,17.17c-9.21,6.09-18.74,9.22-35.5-1.52-3.1-2-6-5.06-9.13-7-14-8.52-49.15-30.09-58.73-38.2l-382.24,1A25,25,0,0,1,1,90.11v-.06H1A32.79,32.79,0,0,1,33.7,57.22l372-1,66.18-46.5s32.63-26.54,52.53,13C524.42,22.77,557,84.47,526.81,143.6Z"/><polygon class="cls-2" points="405.71 56.78 406.29 113.69 447.88 140.51 434.83 126.21 450.65 130.72 432.91 112.72 445.12 112.16 427.7 97.77 441.52 96.58 429.52 88.26 441.17 83.45 430.88 79.2 449.42 75.2 429.07 71.2 442.59 57.85 424.91 58.45 435.11 48.38 428.11 51.03 442.71 31.92 405.71 56.78"/><path class="cls-3" d="M264.85,116.05v-1l-.77-.58a.88.88,0,0,0-.12.76,15.49,15.49,0,0,0-.93-1.43c-13.15-19-13.65-38.2-1.47-57l1.68,1.09c-11.7,18.09-11.22,36.53,1.43,54.82,1.17,1.68,1.48,2.14,1.13,2.81Z"/></g></g></svg>
<div id="progressbar"><div class="progress-label>Loading...</div></div>
</div>

CSS

body{
  margin: 10px;
}

.overlay-img2{
  position:relative;
  top: 0;
  left: 0;
}

.overlay-img{
  position:absolute;
  top: 0;
  left: 0;
}

.ui-progressbar .ui-progressbar-value {
    margin: -20px;
    }

#progressbar {
    background-image: trasparent;
  height:350px;
    clip-path: url(#Layer_1-2); 
    background-color: #333;
}

.ui-widget-header{
  margin-top: -30px;
  background: url("https://s.tmimgcdn.com/blog/wp-content/uploads/2017/05/gradient.jpg?x54449") no-repeat;
}

.cls-1{fill:none;stroke:#0f0c0c;}
.cls-1,.cls-2{stroke:#0f0c0c;stroke-width:2px;}
.cls-2{fill:#050606;}
.cls-3{fill:#0f0c0c;}

JavaScript

$( function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );
 
    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });
 
    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;
 
      progressbar.progressbar( "value", val + 2 );
 
      if ( val < 99 ) {
        setTimeout( progress, 80 );
      }
    }
 
    setTimeout( progress, 2000 );
  } );