JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<link rel="stylesheet" href="https://writerarmy.testmode.tk/dist/assets/plugins/global/plugins.bundle.css">
<link rel="stylesheet" href="https://writerarmy.testmode.tk/dist/assets/css/style.bundle.css">
<script src="https://writerarmy.testmode.tk/dist/assets/plugins/global/plugins.bundle.js"></script>
<script src="https://writerarmy.testmode.tk/dist/assets/js/scripts.bundle.js"></script>
<!DOCTYPE html>
<!--
Author: Keenthemes
Product Name: Metronic
Product Version: 8.1.7
Purchase: https://1.envato.market/EA4JP
Website: http://www.keenthemes.com
Contact: [email protected]
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
-->
<html lang="en">
	<!--begin::Head-->
	<head><base href="../../"/>
		<title>Metronic - The World's #1 Selling Bootstrap Admin Template by Keenthemes</title>
		<meta charset="utf-8" />
		<meta name="description" content="The most advanced Bootstrap 5 Admin Theme with 40 unique prebuilt layouts on Themeforest trusted by 100,000 beginners and professionals. Multi-demo, Dark Mode, RTL support and complete React, Angular, Vue, Asp.Net Core, Rails, Spring, Blazor, Django, Express.js, Node.js, Flask, Symfony & Laravel versions. Grab your copy now and get life-time updates for free." />
		<meta name="keywords" content="metronic, bootstrap, bootstrap 5, angular, VueJs, React, Asp.Net Core, Rails, Spring, Blazor, Django, Express.js, Node.js, Flask, Symfony & Laravel starter kits, admin themes, web design, figma, web development, free templates, free admin themes, bootstrap theme, bootstrap template, bootstrap dashboard, bootstrap dak mode, bootstrap button, bootstrap datepicker, bootstrap timepicker, fullcalendar, datatables, flaticon" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta property="og:locale" content="en_US"...

JavaScript

"use strict";
Array.prototype.contains = function (v)
{
    for (let i = 0; i < this.length; i++)
    {
        if (this[i] === v) return true;
    }
    return false;
};

function setSteps(whatIsVisibleArray)
{
    let steps = $('.stepper-item');
    let nStep=1;
    var nItems = whatIsVisibleArray.length;
    //$('.stepper-line').css('display','');    //restore previous hides
    var lastStep;
    steps.each(function(){
      var $this = $(this);
      var numb = $this.find('.stepper-number');
      if(numb.length >0)
      {
    	if(whatIsVisibleArray.contains(nStep))
      {
  			$this.css('display','');  
        numb.html(nStep);
      	nStep++;
        lastStep = $this;
      }
      else
				$this.css('display','none');  
      }
    });
    
    lastStep.find('.stepper-line').css('display','none');  
    
}

var arrWhatIsVisibleArray = [1,2,3];
setSteps(arrWhatIsVisibleArray);

/*
var KTCreateAccount = function() {
    var e, t, i, o, a, r, s = [];
    var chkbx;
    var client;
    var writer;
    var acc_type;
    var frm_step;
    var numberx;
    var fivehtml;
    var fourhtml;
    var fourinhtml;

    return {
        init: function() {
            (e = document.querySelector("#kt_modal_create_account")) && new bootstrap.Modal(e),
            (t = document.querySelector("#kt_create_account_stepper")) && (i = t.querySelector("#kt_create_account_form"),
            o = t.querySelector('[data-kt-stepper-action="submit"]'),
            a = t.querySelector('[data-kt-stepper-action="next"]'),
            (r = new KTStepper(t)).on("kt.stepper.changed", (function(e) {
                numberx == r.getCurrentStepIndex() ? (o.classList.remove("d-none"),
                o.classList.add("d-inline-block"),
                a.classList.add("d-none")) : frm_step == r.getCurrentStepIndex() ? (o.classList.add("d-none"),
                a.classList.add("d-none")) : (o.classList.remove("d-inline-block"),
                o.classList.remove("d-none"),
               ...