JSFiddle - React, Tailwind, and code Playground

by sp_true

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="api">
  <div class="id_doc disburse">
    <div class="container-fluid api__top">
      <div class="row" style="background:#fff;opacity:100">
        <div class="container">
          <div class="row api-doc__item">
            <div class="col-11 children-block">
              <div class="row api-doc__item center-child padding-bottom">
                <div class="col-12 col-md-1">
                  <div class="point">
                    <div class="point__bg" style="background:#fff;opacity:100">
                    </div>
                    <div class="point__circle point-blue point-blue point-blue point-blue">
                      <span class="minus"></span>
                      <span class="plus"></span>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-11">
                  <div class="col-12 col-md-10 col-lg-7 p-mob">
                    <h5 class="title">
                      <div id="hs_cos_wrapper_module_1627047206680190_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_text" data-hs-cos-field="title">Security Questions</div>
                    </h5>
                    <div class="descpt">
                      <div id="hs_cos_wrapper_module_1627047206680190_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_text" data-hs-cos-field="descpt">Confirm the identify of payment token recipients with configurable security questions.</div>
                    </div>
                  </div>
                  <div class="js-toggle-slide line__slide-toggle animation-image--right" data-key="a">
                    <div class="col-12 col-md-7 p-mob">
                      <div...

CSS

@import "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

.api {
  padding-bottom: 136px;
  overflow: hidden
}

/* Heading Row */
.api .id_doc .api-doc__heading .api-doc__heading__bg {
  position: absolute;
  top: 0;
  left: 0;
}

.api .id_doc .api-doc__heading {
  position: relative;
  padding-top: 136px;
  padding-bottom: 74px;
}

.api .id_doc .api-doc__heading .heading__badges {
  background: #111827;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  margin: 19px auto;
  padding: 7.5px 6px;
}

.api .id_doc .api-doc__heading .heading__badges .method {
  font-family: Roboto Mono;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0em;
  background: #374151;
  border-radius: 4px;
  padding: 4px 8px;
  margin-right: 10px;
  text-transform: uppercase;
  color: #fff
}

.api .id_doc .api-doc__heading .heading__badges .link {
  font-family: Roboto Mono;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0em;
  color: #F9FAFB;
}

.api .id_doc .api-doc__heading .title {
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 58px;
  letter-spacing: 0em;
  color: #090C38;
  margin: 19px 0;
}

.api .id_doc .api-doc__heading .descpt {
  font-family: Gotham;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0em;
  color: #090C38;
  max-width: 712px;
  margin: 19px auto;
}

.api .id_doc .api-doc__heading .heading__line-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 19px 0 22px;
}

.api .id_doc .api-doc__heading .icon-pulse {
  margin: 22px auto 0;
  position: relative;
  display: flex;
  justify-content: center;
}

.api .id_doc .api-doc__heading .heading__line-link...

JavaScript

$(document).ready(function() {
  // Function Type All Code Editor
  function typeCode(lineItem) {
    const codeLine = lineItem.querySelector(".type"),
      columnBlock = lineItem.querySelector(".column"),
      code = codeLine.innerHTML,
      lengthContent = lineItem.querySelector(".hide-text").innerHTML.split('br').length

    let str = code,
      i = 0,
      isTag,
      text;
    columnBlock.innerHTML = Array(lengthContent + 1).fill(0).map((_, i) => `<span>${i+1}</span>`).join('<br>');

    (function type() {
      text = str.slice(0, ++i);
      if (text === str) return;

      lineItem.querySelector('.type').innerHTML = text;
      let char = text.slice(-1);
      if (char === '<') isTag = true;
      if (char === '>') isTag = false;

      if (isTag) return type();
      setTimeout(type, 40); // Here is speed to All Block left anim (60)
    }());
  }
  let isScrolling = false;
  let listItems = document.querySelectorAll(".code-editor");

  let isTablet = $(window).width() >= 768
  // 	Scroll only < Tablet
  if (isTablet) {
    window.addEventListener("scroll", throttleScroll, false);

    function throttleScroll(e) {
      if (isScrolling == false) {
        window.requestAnimationFrame(function() {
          scrolling(e);
          isScrolling = false;
        });
      }
      isScrolling = true;
    }
    document.addEventListener("DOMContentLoaded", scrolling, false);

    let count = 0;
    var block_show = false;
    if (block_show) {
      return false
    }
    // 		Scroll Setting
    function scrolling(e) {
      // 	Need to rewrite, temporary solution :|
      var istItems = document.querySelectorAll(".code-editor"),
        itemPa = document.querySelector('.payment-message'),
        itemEx = document.querySelector('.expiration')
      for (var i = 0; i < listItems.length; i++) {
        var listItem = listItems[i];

        if (isPartiallyVisible(listItem) && i >= count) {
          typeCode(listItem)
         ...