JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <!-- Our Services Area -->
    <section class="our_services_area">
        <div class="container">
            <div class="tittle wow fadeInUp">
                <h2>Our Services</h2>
                <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h4>
            </div>
            <div class="portfolio_inner_area">
                <div class="portfolio_filter">
                    <ul>                        
                        <li data-filter=".photography" class="active"><a href="">ARCHITECTURE</a></li>
                        <li data-filter=".branding"><a href="">Building</a></li>
                        <li data-filter=".webdesign"><a href="">CONSTRUCTION</a></li>
                        <li data-filter=".adversting"><a href="">DESIGN</a></li>
                        <li data-filter=".painting"><a href="">Painting</a></li>
                    </ul>
                </div>
                <div class="portfolio_item">
                   <div class="grid-sizer"></div>
                    <div class="single_facilities col-xs-4 p0 painting photography adversting">
                       <div class="single_facilities_inner">
                          	<img src="https://i.ibb.co/6sJ72xx/sv-6.jpg" alt="">
                            <div class="gallery_hover">
                                <h4>Construction</h4>
                                <ul>
                                    <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
...

CSS

/*--------------------------------------------------*/
/* our_services_area */
.our_services_area {
    background: #2e3841;
    padding-bottom: 100px;
}
.our_services_area .tittle h2 {
    color: #fff;
}
.our_services_area .tittle h4 {
    color: #fefefe;
}
.our_services_area .portfolio_inner_area {
    padding-top: 60px;
}
.our_services_area .portfolio_inner_area .portfolio_filter {
    padding-bottom: 55px;
}
.our_services_area .portfolio_inner_area .portfolio_filter ul {
    text-align: center;
    margin: 0;
    padding: 0;
}
.our_services_area .portfolio_inner_area .portfolio_filter ul li {
    list-style: none;
    display: inline-block;
    padding-left: 30px;
}
.our_services_area .portfolio_inner_area .portfolio_filter ul li:first-child {
    padding: 0;
}
.our_services_area .portfolio_inner_area .portfolio_filter ul li a {
    font: 400 14px "Oswald", sans-serif;
    text-transform: uppercase;
    color: #f5f5f5;
}
.our_services_area .portfolio_inner_area .portfolio_filter ul li:hover a, .our_services_area .portfolio_inner_area .portfolio_filter ul li:focus a, .our_services_area .portfolio_inner_area .portfolio_filter ul li.active a {
    color: #f6b60b;
}
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner {
    position: relative;
}
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner img {
    max-width: 100%;
}
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
    background-color: rgba(248, 184, 29, 0.851);
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow: hidden;
    display: block;
    text-align: center;
    padding-top: calc(50% - 70px);
    cursor: pointer;
    opacity: 0;
    transition: all 300ms linear 0s;
}
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover h4...

JavaScript

;(function($) {
    "use strict";

    //* mainNavbar
    function mainNavbar(){
        if ( $('#main_navbar').length ){
             $('#main_navbar').affix({
                offset: {
                    top: 10,
                    bottom: function () {
                        return (this.bottom = $('.footer').outerHeight(true))
                    }
                }
            });
        };
    };

     //* nav_searchFrom
    function searchFrom(){
        if ( $('.nav_searchFrom').length ){
             $('.nav_searchFrom').on('click',function(){
                $('.searchForm').toggleClass('show');
                return false
            });
            $('.form_hide').on('click',function(){
                $('.searchForm').removeClass('show')
            });
        };
    };

    //*  Main slider js
    function home_main_slider(){
        if ( $('.slider_inner').length ){
            $('.slider_inner').camera({
                loader: true,
                navigation: true,
                autoPlay:false,
                time: 4000,
                playPause: false,
                pagination: false,
                thumbnails: false,
                overlayer: true,
                hover: false,
                minHeight: '500px',
            });
        }
    }

    //* Isotope Js
    function portfolio_isotope(){
        if ( $('.portfolio_item, .portfolio_2 .portfolio_filter ul li').length ){
            // Activate isotope in container
            $(".portfolio_item").imagesLoaded( function() {
                $(".portfolio_item").isotope({
                    itemSelector: ".single_facilities",
                    layoutMode: 'masonry',
                    percentPosition:true,
                     filter: '.photography',
                    masonry: {
                        columnWidth: ".grid-sizer, .grid-sizer-2"
                    }
                });
            });

            // Activate isotope in container
           ...