ui-23

<div class="ui-23">
    <div class="row">
        <div class="col-md-3 col-sm-3">
            <!-- Nav One -->
            <div class="ui-nav-one">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#block-one" data-toggle="tab"><i class="fa fa-comments"></i><span>Comments</span></a>
                    </li>
                    <li><a href="#block-two" data-toggle="tab"><i class="fa fa-asterisk"></i><span>Asterisk</span></a>
                    </li>
                    <li><a href="#block-three" data-toggle="tab"><i class="fa fa-building"></i><span>Building</span></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <!-- Tab Content -->
            <div class="tab-content">
                <!-- Tab Pane -->
                <div role="tabpanel" class="tab-pane fade in active" id="block-one">
                    <!-- Heading -->
                    <h2><i class="fa fa-comments lblue"></i> Gallery</h2>
                    <!-- Para -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum dui risus, sit amet luctus nisl rutrum eget. Praesent tincidunt volutpat metus, et egestas magna tincidunt nec. Suspendisse sodales iaculis nibh, in cursus lectus pulvinar porta. Donec dapibus auctor mi. Maecenas faucibus finibus risus laoreet mattis.</p>
                </div>
                <!-- Tab Pane -->
                <div role="tabpanel" class="tab-pane fade" id="block-two">
                    <!-- Heading -->
                    <h2><i class="fa fa-asterisk lblue"></i> Asterisk</h2>
                    <p>Donec eu velit posuere, volutpat ante interdum, rutrum leo. Pellentesque non justo at dolor rhoncus aliquam. Sed eget tristique lacus. In viverra consectetur dolor, sed sagittis metus elementum ut. Sed mollis accumsan urna sed egestas. Quisque erat mauris, aliquet eu augue ut, posuere facilisis sapien.</p>
                </div>
                <!-- Tab Pane -->
                <div role="tabpanel" class="tab-pane fade" id="block-three">
                    <h2><i class="fa fa-building lblue"></i> Building</h2>
                    <p>Maecenas at urna diam. Donec et accumsan metus. Maecenas nec vehicula erat. Vestibulum dapibus aliquam elit, nec venenatis lectus consectetur at. Fusce eu elementum felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas semper tincidunt finibus. Duis rhoncus facilisis sagittis.</p>
                </div>
                <!-- Tab Pane -->
                <div role="tabpanel" class="tab-pane fade" id="block-four">
                    <h2><i class="fa fa-university lblue"></i> University</h2>
                    <p>Curabitur imperdiet, ligula vitae dignissim venenatis, nisl lorem vulputate neque, id dictum quam magna ut leo. Donec at augue velit. Ut sit amet sem ex. Proin lectus ex, porttitor ut vulputate a, ultrices vel ipsum. Integer vitae sagittis massa. Maecenas porta magna nec libero convallis facilisis. Nam sagittis eros quis nulla.</p>
                </div>
                <!-- Tab Pane -->
                <div role="tabpanel" class="tab-pane fade" id="block-five">
                    <h2><i class="fa fa-bookmark lblue"></i> Bookmark</h2>
                    <p>Aliquam vel tristique urna. Morbi semper mauris mauris. Cras hendrerit dapibus massa nec accumsan. Suspendisse vehicula mauris eget laoreet vestibulum. Sed dolor nunc, varius ac tincidunt in, sodales scelerisque leo. Nam faucibus nisi at arcu varius eleifend ut nec urna. Morbi aliquam, lectus non blandit luctus, tellus nunc congue nulla.</p>
                </div>
                <!-- Tab Pane -->
                <div role="tabpanel" class="tab-pane fade" id="block-six">
                    <h2><i class="fa fa-toggle-on lblue"></i> Toggle</h2>
                    <p>Quisque elit diam, rhoncus eget pretium in, egestas id nibh. In sit amet eros est. Pellentesque consequat sed urna in vehicula. Donec finibus nisi ut felis porttitor ullamcorper. Suspendisse nulla dui, aliquet quis dui eu, pretium laoreet sapien. Maecenas cursus rhoncus dolor, in luctus eros consectetur nec.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-3">
            <!-- Nav Two -->
            <div class="ui-nav-two">
                <!-- Nav Tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li><a href="#block-four" data-toggle="tab"><i class="fa fa-university"></i><span>University</span></a>
                    </li>
                    <li><a href="#block-five" data-toggle="tab"><i class="fa fa-bookmark"></i><span>Bookmark</span></a>
                    </li>
                    <li><a href="#block-six" data-toggle="tab"><i class="fa fa-toggle-on"></i><span>Toggle</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>