JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<div class="col-md-3 col-xs-0 side-nav">
</div>
<div class="col-md-9 col-xs-12">
    <div class="main container">
        <article class="post__article">
            

            <section class="feature-section row-fluid" id="templates">
                <h2 class="main-feature-heading" id="scrollNav-1">loren ipsum</h2>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/import.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/filters3.PNG" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/groups.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/teams.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren...

CSS

#templates >.feature {
    display:none;
}
#manuals >.feature {
    display:none;
}
#advertise >.feature {
    display:none;
}

JavaScript

$(function () {
    $("#templates-loadMore").on('click', function (e) {
        e.preventDefault();
        $("#templates >.feature:hidden").slice(0, 2).slideDown();
        if ($("#templates >.feature:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
    $("#manuals-loadMore").on('click', function (e) {
        e.preventDefault();
        $("#manuals >.feature:hidden").slice(0, 2).slideDown();
        if ($("#manuals >.feature:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
    $("#advertise-loadMore").on('click', function (e) {
        e.preventDefault();
        $("#advertise >.feature:hidden").slice(0, 2).slideDown();
        if ($("#advertise >.feature:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});