Demo

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-demo {
    .block-demo-width-wide {
        .container-fluid {
            max-width: 100%;
            padding: 0;
        }
    }

    .block-demo-width-narrow {
        .container-fluid {
            max-width: auto;
            @include padding-right(rem-calc(15));
            @include padding-left(rem-calc(15));
            margin-right: auto;
            margin-left: auto;

            @media (min-width: 576px) {
                .container-fluid {
                    max-width: 540px;
                }
            }

            @media (min-width: 768px) {
                .container-fluid {
                    max-width: 720px;
                }
            }

            @media (min-width: 800px) {
                .container-fluid {
                    max-width: 780px;
                }
            }

            @media (min-width: 992px) {
                .container-fluid {
                    max-width: 960px;
                }
            }

            @media (min-width: 1100px) {
                .container-fluid {
                    max-width: 1080px;
                }
            }

            @media (min-width: 1200px) {
                .container-fluid {
                    max-width: 1140px;
                }
            }

            @media (min-width: 1500px) {
                .container-fluid {
                    max-width: 1470px;
                }
            }
        }
    }

    .block-three-blocks__tabs {
        ul {
            background-color: $white;
            @include margin(rem-calc(3.75rem 0));
            @include padding(rem-calc(0.625rem));
            max-width: 67.25rem;
            margin-left: auto;
            margin-right: auto;

            @include bp($lg, true) {
                max-width: 100%;
            }

            li {
                display: inline-block;
                @include padding(rem-calc(1.063rem 0));
                min-width: 32.75rem;
                text-align: center;

                @include bp($xl, true) {
                    min-width: 26.75rem;
                }

                @include bp($lg, true) {
                    min-width: 100%;
                }

                &.active {
                    background-color: $light-blue;
                }

                a {
                    @include fluid-type(18, 22, 375, $max-container-size);
                    display: block;
                    color: $secondary;

                    @include bp($lg, true) {
                        font-size: 1.25rem;
                    }

                    img {
                        position: relative;
                        top: -2px;
                        max-width: 24px;
                    }
                }
            }
        }
    }

    .block-three-blocks__tab-wrapper {
        display: none;
        -webkit-animation: fadeIn 2s;
        animation: fadeIn 2s;

        &.active {
            display: block;
            -webkit-animation: fadeIn 2s;
            animation: fadeIn 2s;
        }
    }
}

$(document).ready(function () {
  $(".block-three-blocks__tabs li").click(function () {
    $(this)
      .closest(".block-demo")
      .find(".block-three-blocks__tabs li")
      .removeClass("active");
    $(this).addClass("active");
    let tabId = $(this).attr("data-tabid");
    $(this)
      .closest(".block-demo")
      .find(".block-three-blocks__tab-wrapper")
      .hide();
    $(this)
      .closest(".block-demo")
      .find(".tab-wrapper-" + tabId)
      .show();
  });
});