ui-36

<!-- UI - X Starts -->
        <div class="ui-36">
            <!-- Button -->
            <div class="ui-btn">
                <!-- Icon -->
                <a href="#"> <i class="fa fa-angle-up bg-lblue"></i> </a>
            </div>
            <!-- Content -->
            <div class="ui-content">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-3 col-xs-12">
                            <!-- Item -->
                            <div class="ui-item">
                                <!-- Bar -->
                                <div class="ui-bar">
                                    <!-- SpakBar -->
                                    <span class="sparkbar sparkbarone">23,76,46,75,60,70,77,89,34,12</span>
                                </div>
                                <!-- Heading -->
                                <div class="ui-heading">
                                    <!-- Small Heading -->
                                    <h5>Lipsum</h5>
                                    <!-- Big Heading  -->
                                    <h2>4,245</h2>
                                </div>
                                <div class="clearfix"></div>
                                <!-- Icon -->
                                <div class="ui-icon">
                                    <!-- Icon and Number -->
                                    <a href="#"><i class="fa fa-angle-up bg-red"></i></a> &nbsp;<span>2,345</span> &nbsp; <a href="#"><i class="fa fa-angle-down bg-green"></i></a> &nbsp;<span>2,245</span>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-12">
                            <!-- Item -->
                            <div class="ui-item">
                                <!-- Bar -->
                                <div class="ui-bar">
                                    <!-- SparkBar -->
                                    <span class="sparkbar sparkbartwo">34,55,66,76,46,80,10,16,56,66</span>
                                </div>
                                <!-- Heading -->
                                <div class="ui-heading">
                                    <!-- Small Heading -->
                                    <h5>Lorem</h5>
                                    <!-- Big Heading -->
                                    <h2>2,567</h2>
                                </div>
                                <div class="clearfix"></div>
                                <!-- Icon -->
                                <div class="ui-icon">
                                    <!-- Icon and Number -->
                                    <a href="#"><i class="fa fa-angle-up bg-red"></i></a> &nbsp;<span>2,345</span> &nbsp; <a href="#"><i class="fa fa-angle-down bg-green"></i></a> &nbsp;<span>4,345</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-12">
                            <!-- Item -->
                            <div class="ui-item">
                                <!-- Bar -->
                                <div class="ui-bar">
                                    <!-- SparkBar -->
                                    <span class="sparkbar sparkbarthree">6,7,12,3,4,9,6,10,8,9</span>
                                </div>
                                <!-- Heading -->
                                <div class="ui-heading">
                                    <!-- Small Heading -->
                                    <h5>Finibus</h5>
                                    <!-- Big Heading -->
                                    <h2>3,890</h2>
                                </div>
                                <div class="clearfix"></div>
                                <!-- Icon -->
                                <div class="ui-icon">
                                    <!-- Icon and Number -->
                                    <a href="#"><i class="fa fa-angle-up bg-red"></i></a> &nbsp;<span>1,345</span> &nbsp; <a href="#"><i class="fa fa-angle-down bg-green"></i></a> &nbsp;<span>1,245</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-12">
                            <!-- Item -->
                            <div class="ui-item">
                                <!-- Bar -->
                                <div class="ui-bar">
                                    <!-- SparkBar -->
                                    <span class="sparkbar sparkbarfour">80,90,56,67,23,45,76,46,66,12</span>
                                </div>
                                <!-- Heading -->
                                <div class="ui-heading">
                                    <!-- Small Heading -->
                                    <h5>Marolum</h5>
                                    <!-- Big Heading -->
                                    <h2>7,678</h2>
                                </div>
                                <div class="clearfix"></div>
                                <!-- Icon -->
                                <div class="ui-icon">
                                    <!-- Icon and Number -->
                                    <a href="#"><i class="fa fa-angle-up bg-red"></i></a> &nbsp;<span>9,345</span> &nbsp; <a href="#"><i class="fa fa-angle-down bg-green"></i></a> &nbsp;<span>5,345</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- UI - X Ends -->