JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<script src="https://www.pochtabank.ru/service/bistr_doma"></script>
<script src="https://www.pochtabank.ru/service/bistr_doma"></script>
<script src="https://www.pochtabank.ru/service/bistr_doma"></script>
<div class="section">
  <div class="style_fullWrapper__HmxGl">
    <div class="style_wrapper__2wh18">
      <div class="style_content__1IDbJ">
        <div class="style_left__d9GOJ">
          <h2 class="style_title__3EAx6">Калькулятор кредита на строительство</h2>
          <div class="style_wrapper__3tDXH style_noMaxWidth__1YQzQ">
            <div class="style_wrapper__1iOfv style_noMaxWidth__1YQzQ"><input type="text" value="3 900 000 ₽" class="style_input__2YNfX style_valid__1Rg-s style_inputLabel__2_9PN" required=""><span class="style_label__B0BJ6">Стоимость дома</span></div>
            <div role="presentation">
              <div class="style_slider__3M1xH noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr">
                <div class="noUi-base">
                  <div class="noUi-connects">
                    <div class="noUi-connect" style="transform: translate(0%, 0px) scale(0.8625, 1);"></div>
                  </div>
                  <div class="noUi-origin" style="transform: translate(-137.5%, 0px); z-index: 4;">
                    <div class="noUi-handle noUi-handle-lower" data-handle="0" role="slider" aria-orientation="horizontal" aria-valuemin="500000.0" aria-valuemax="5000000.0" aria-valuenow="3900000.0" aria-valuetext="3900000.00">
                      <div class="noUi-touch-area"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="style_pips__3tGPh">
                <div class="style_pipsContainer__2ZJBp">
                  <div role="presentation" class="style_pip__bjoVL" style="left:0%">
                    <div class="style_label__34a9S">500 тыс.</div>
                  </div>
                  <div role="presentation" class="style_pip__bjoVL"...

SCSS

.layoutWrapper
    flex-grow: 2
    position: relative
    width: 100%
    display: flex
    flex-direction: column
    justify-content: space-between
    background: $white
    color: $dark


    &.layoutContentDark
        background: $dark-d
        color: $white


.layoutMiddle
    flex-grow: 2
    position: relative
    padding: 0 0 32px 0
    overflow: hidden
    +tablet-lg
        padding: 0 0 32px 0
    +mobile
        padding: 0 0 20px 0

    +tinaView(true)
        overflow: initial


    &.sidebarView
        margin: 0 auto
        max-width: $max-width
        min-width: $min-width
        padding: 0 24px 32px
        width: 100%
        +tablet-lg
            padding: 0 16px


        .layoutContent
            width: (100%/12) * 8
            +tablet-mobile
                width: 100%


.layoutContent
    margin: 0 auto
    position: relative
    min-height: 100%
    background: transparent
    width: 100%


.layoutSidebar
    width: (100%/12) * 4
    padding: 32px 16px
    +tablet-mobile
        width: 100%


.layoutInner
    .sidebarView &
        display: flex
        align-items: flex-start
        justify-content: flex-start
        flex-wrap: wrap
        margin: 0 -16px


.layoutSectionTitle
    +full-wrapper()
    color: $dark
    font: bold 48px $font
    line-height: 117%
    margin-bottom: 16px
    margin-top: 16px
    +tablet-mobile
        font-size: 28px
        line-height: 136%

    +darkTheme()
        color: $white


    .sidebarView &
        margin: 16px auto 0
        padding: 0


.layoutWrapperHide
    display: none


.dark
    .layoutSectionTitle
        color: $white
        
        @import @sassConfig

// Анимации
.questionsCollapsibleWrap
    &.animationInit
        animation-delay: .3s
        +desktop
            +fadeInUp
        +tablet-mobile
            +fadeInDown


.trigger
    font-family: $font
    line-height: 144%
    font-weight: 500
    transition: color .3s ease
    padding: 0 32px 0 0
    +desktop
       ...