JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="profileService"
     data-j-forms="true">
    <form action="./submit.profile" name="jForms"  method="post">
        <div class="profileService_profileDescriptors" data-j-forms-sections>
                <section class="beautySection section-1">
                  <h4 class="profileService_profileDescriptors-header">Section Title</h4>
                        <label for="profileService_profileDescriptors" class="profileService_profileDescriptors-input-wrapper"> hair</label>
                            <input
                                    id="profileService_profileDescriptors"
                                    type="text"
                                    value="gfhfg"
                                    name="dfh"
                            />
                  <div class="radiogroup">
                <input id="radio-1"  class= "radio-custom" type="radio" name="radio-group" value="yes"/>
                <label for="radio-1" class="radio-custom-label">Yes</label>
                  <svg class="svgHeartIcon" width="22px" height="21px" viewBox="0 0 22 21" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M10,3.58804 C11.24585,1.19601 12.5083,0 15,0 C17.75748,0 20,2.14286 20,4.78405 C20,9.56811 15,14.35216 10,19.1362133 C5,14.35216 0,9.56811 0,4.78405 C0,2.14286 2.24253,0 5,0 C7.5083,0 8.75415,1.19601 10,3.58804 L10,3.58804 L10,3.58804 Z"/>
                                      </svg>
                    </div>
                  <div class="radiogroup">
                <input id="radio-2"  class= "radio-custom" type="radio" name="radio-group" value="no" />
                <label for="radio-2" class="radio-custom-label">No</label>
                    <svg class="svgHeartIcon" width="22px" height="21px" viewBox="0 0 22 21" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10,3.58804 C11.24585,1.19601 12.5083,0 15,0 C17.75748,0 20,2.14286 20,4.78405 C20,9.56811...

SCSS

$profileService-width: 60%;
$profileService-margin: auto !default;

$profileService-width-mobile: 98% !default;

//Section Headings
$profileService_h4-font-size: 16px * 1.5 !default;
$profileService_h4-letter-spacing: 0.8px !default;
$profileService_h4-margin-bottom: 12px !default;

$profileService_h4-font-size-mobile: 16px * 1.3 !default;
$profileService_h4-font-style-mobile: normal !default;
$profileService_h4-line-height-mobile: 1.05px !default;

//Labels
$profileService_label-height: 45px !default;
$profileService_label-border: 1px solid #333;
$profileService_label-font-size: 16px * 1.3 !default;
$profileService_label-margin-bottom: 20px !default;

//For Mobile
$profile_isMobile: true !default;

.hero-unit {
  margin: 50px auto 0 auto;
  width: 300px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  background-color: #eee;
  border-radius: 6px;
  padding: 60px;
  h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
  }
}

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

.profileService {
  width: $profileService-width;
  margin-left: $profileService-margin;
  margin-right: $profileService-margin;
  @if ($profile_isMobile) {
    width: $profileService-width-mobile;
  }
}

.profileService h4 {

  font-size: $profileService_h4-font-size;
  letter-spacing: $profileService_h4-letter-spacing;
  margin-bottom: $profileService_h4-margin-bottom;
  @if ($profile_isMobile) {
    font-size: $profileService_h4-font-size-mobile;
    font-style: $profileService_h4-font-style-mobile;
    line-height: $profileService_h4-line-height-mobile;
  }
}

.profileService label {
  display: block;
  height: $profileService_label-height;
  font-size: $profileService_label-font-size;
  line-height: $profileService_label-height;
  margin-bottom: $profileService_label-margin-bottom;
}

.beautySection {
  width: 1180px;
  margin: 0 auto;
  border: 1.5px solid black;
   input[type="text"]{
        width: 90%;
     ...

Babel + JSX

class JForms {
    constructor() {
      // Define state in single tree for simplicity
      this.state = {
        container: null,
        sectionContainer: {
          element: null,
          originalMargin: 0
        },
        sections: {
          elements: [],
          width: 0
        },
        controls: {
          prev: null,
          next: null
        },
        dimensions: {
          width: 0,
          height: 0
        }
      };

      this.scroll = this.scroll.bind(this);

      this.getContainer();
      this.getSectionContainer();
      this.getSections();
      this.getControls();
      this.buildScroller();
      this.addEvents();
    }

    /**
     * addEvents
     * Apply necessary event listeners
     */
    addEvents() {
      this.state.controls.prev.addEventListener('click', this.scroll);
      this.state.controls.next.addEventListener('click', this.scroll);
    }

    /**
     * getContainer
     * Get the outermost container and add to state
     */
    getContainer() {
      const container = document.querySelector('[data-j-forms]');

      if (!container) {
        console.warn('JForms: Cannot find container.');
        return;
      }

      container.style.overflow = 'hidden';

      this.state.container = container;
    }

    /**
     * getSectionContainer
     * Get the section container, apply a transition and add to state
     */
    getSectionContainer() {
      const element = this.state.container.querySelector('[data-j-forms-sections]');
      const originalMargin = this.getStyle(element, 'margin-left', true);

      if (!element) {
        console.warn('JForms: Cannot find section container.');
        return;
      }

      element.style.transition = 'margin-left 0.5s ease';

      this.state.sectionContainer = {
        element,
        originalMargin
      };
    }

    /**
     * getSections
     * Get the inner sections, spread returned nodelist into an array and add to state
     */
    getSections() {
     ...