JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
<link rel="stylesheet" href="https://runyour.agency/themes/app/css/style.css">
<script src="https://runyour.agency/app/build/app.bundle.js"></script>
<section class="space-sm">
    <div class="container">
        <div class="row mb-4">
            <div class="col text-center">
                <img src="https://howdoweb.com/images/logo-white.svg" width="100">
            </div>
            <!--end of col-->
        </div>
        <!--end of row-->
    </div>

    <nav aria-label="breadcrumb" role="navigation">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="index.html">Home</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="pages-app.html">App Pages</a>
                        </li>

                        <li class="breadcrumb-item active" aria-current="page">Wizard Onboarding</li>
                    </ol>
                </div>
                <!--end of col-->
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </nav>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="card card-lg">
                    <div class="card-body">
                        <form class="wizard sw-main sw-theme-default">
                            <ul class="nav nav-tabs text-center row justify-content-center step-anchor">

                                <li class="col-3 col-md-2 nav-item neon-section-trigger active" data-index="0">
                                    <div class="step-circle nav-link">1</div>
                ...

SCSS

.neon-page {
  background: white;
}
.overflow-hidden {
  overflow: hidden;
}

.step-circle {
  font-size: 1rem;
  font-weight: bolder;
}

body {
  overflow: scroll;
}

.gallery {
  position: relative;
  .neon-section {
    background-size: cover;
  }
}



/* position dots in gallery */
.flickity-page-dots {
  bottom: 12px;
}
/* white circles */
.flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 2px solid white;
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: white;
}

JavaScript

const pageAnimations = [["hidden", "visible"], ["moveToLeft", "moveFromRight"], ["moveToRight", "moveFromLeft"], ["moveToTop", "moveFromBottom"], ["moveToBottom", "moveFromTop"], ["fade", "moveFromRight ontop"], ["fade", "moveFromLeft ontop"], ["fade", "moveFromBottom ontop"], ["fade", "moveFromTop ontop"], ["moveToLeftFade", "moveFromRightFade"], ["moveToRightFade", "moveFromLeftFade"], ["moveToTopFade", "moveFromBottomFade"], ["moveToBottomFade", "moveFromTopFade"], ["moveToLeftEasing ontop", "moveFromRight"], ["moveToRightEasing ontop", "moveFromLeft"], ["moveToTopEasing ontop", "moveFromBottom"], ["moveToBottomEasing ontop", "moveFromTop"], ["scaleDown", "moveFromRight ontop"], ["scaleDown", "moveFromLeft ontop"], ["scaleDown", "moveFromBottom ontop"], ["scaleDown", "moveFromTop ontop"], ["scaleDown", "scaleUpDown delay300"], ["scaleDownUp", "scaleUp delay300"], ["moveToLeft ontop", "scaleUp"], ["moveToRight ontop", "scaleUp"], ["moveToTop ontop", "scaleUp"], ["moveToBottom ontop", "scaleUp"], ["scaleDownCenter", "scaleUpCenter delay400"], ["rotateRightSideFirst", "moveFromRight delay200 ontop"], ["rotateLeftSideFirst", "moveFromLeft delay200 ontop"], ["rotateTopSideFirst", "moveFromTop delay200 ontop"], ["rotateBottomSideFirst", "moveFromBottom delay200 ontop"], ["flipOutRight", "flipInLeft delay500"], ["flipOutLeft", "flipInRight delay500"], ["flipOutTop", "flipInBottom delay500"], ["flipOutBottom", "flipInTop delay500"], ["rotateFall ontop", "scaleUp"], ["rotateOutNewspaper", "rotateInNewspaper delay500"], ["rotatePushLeft", "moveFromRight"], ["rotatePushRight", "moveFromLeft"], ["rotatePushTop", "moveFromBottom"], ["rotatePushBottom", "moveFromTop"], ["rotatePushLeft", "rotatePullRight delay180"], ["rotatePushRight", "rotatePullLeft delay180"], ["rotatePushTop", "rotatePullBottom delay180"], ["rotatePushBottom", "rotatePullTop delay180"], ["rotateFoldLeft", "moveFromRightFade"], ["rotateFoldRight", "moveFromLeftFade"], ["rotateFoldTop",...