| Server IP : 144.76.124.212 / Your IP : 216.73.216.138 Web Server : LiteSpeed System : Linux l4cp.vnetindia.com 4.18.0-553.40.1.lve.el8.x86_64 #1 SMP Wed Feb 12 18:54:57 UTC 2025 x86_64 User : rakcha ( 1356) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home5/rakcha/www/user/pages/UI/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from www.multipurposethemes.com/html-templates/admin-templates/bootstrap-4/maximumadmin/pages/UI/tab.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 09 Oct 2017 12:04:32 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../images/favicon.ico">
<title>Maximum Admin - Dashboard Tab UI </title>
<!-- Bootstrap v4.0.0-beta -->
<link rel="stylesheet" href="../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="../../assets/vendor_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../../assets/vendor_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../css/master_style.css">
<!-- maximum_admin Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../css/skins/_all-skins.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="../../index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini">MAX</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Maximum</b>Admin</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../../images/user2-160x160.jpg" class="user-image rounded-circle" alt="User Image">
<span class="d-none d-sm-inline-block">MultiPurpose Themes</span>
</a>
<ul class="dropdown-menu scale-up">
<!-- User image -->
<li class="user-header">
<img src="../../images/user2-280x90.jpg" class="img-fluid" alt="User Image">
<p>
MultiPurpose Themes
<small>Member since April . 2016</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col text-center">
<a href="#">Followers</a>
</div>
<div class="col text-center">
<a href="#">Friends</a>
</div>
<div class="col text-center">
<a href="#">Sales</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<div class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</div>
</ul>
</li>
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope"></i>
<span class="label label-success">5</span>
</a>
<ul class="dropdown-menu scale-up">
<li class="header">You have 5 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu inner-content-div">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="../../images/user2-160x160.jpg" class="rounded-circle" alt="User Image">
</div>
<div class="mail-contnet">
<h4>
Lorem Ipsum
<small><i class="fa fa-clock-o"></i> 15 mins</small>
</h4>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="../../images/user3-128x128.jpg" class="rounded-circle" alt="User Image">
</div>
<div class="mail-contnet">
<h4>
Nullam tempor
<small><i class="fa fa-clock-o"></i> 4 hours</small>
</h4>
<span>Curabitur facilisis erat quis metus congue viverra.</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../../images/user4-128x128.jpg" class="rounded-circle" alt="User Image">
</div>
<div class="mail-contnet">
<h4>
Proin venenatis
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<span>Vestibulum nec ligula nec quam sodales rutrum sed luctus.</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../../images/user3-128x128.jpg" class="rounded-circle" alt="User Image">
</div>
<div class="mail-contnet">
<h4>
Praesent suscipit
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<span>Curabitur quis risus aliquet, luctus arcu nec, venenatis neque.</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../../images/user4-128x128.jpg" class="rounded-circle" alt="User Image">
</div>
<div class="mail-contnet">
<h4>
Donec tempor
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<span>Praesent vitae tellus eget nibh lacinia pretium.</span>
</div>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See all e-Mails</a></li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell"></i>
<span class="label label-warning">7</span>
</a>
<ul class="dropdown-menu scale-up">
<li class="header">You have 7 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu inner-content-div">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> Curabitur id eros quis nunc suscipit blandit.
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning text-yellow"></i> Duis malesuada justo eu sapien elementum, in semper diam posuere.
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users text-red"></i> Donec at nisi sit amet tortor commodo porttitor pretium a erat.
</a>
</li>
<li>
<a href="#">
<i class="fa fa-shopping-cart text-green"></i> In gravida mauris et nisi
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> Praesent eu lacus in libero dictum fermentum.
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> Nunc fringilla lorem
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> Nullam euismod dolor ut quam interdum, at scelerisque ipsum imperdiet.
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag"></i>
<span class="label label-danger">6</span>
</a>
<ul class="dropdown-menu scale-up">
<li class="header">You have 6 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu inner-content-div">
<li><!-- Task item -->
<a href="#">
<h3>
Lorem ipsum dolor sit amet
<small class="pull-right">30%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 30%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">30% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Vestibulum nec ligula
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-danger" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Donec id leo ut ipsum
<small class="pull-right">70%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-light-blue" style="width: 70%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">70% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Praesent vitae tellus
<small class="pull-right">40%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-yellow" style="width: 40%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Nam varius sapien
<small class="pull-right">80%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-red" style="width: 80%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">80% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Nunc fringilla
<small class="pull-right">90%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-primary" style="width: 90%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">90% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-cog fa-spin"></i></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar" style="background-image: url('img/bg.jpg');background-position: left;background-attachment: fixed;">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="image">
<img src="../../images/user2-160x160.jpg" class="rounded-circle" alt="User Image">
</div>
<div class="info">
<p>MultiPurpose Themes</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="../../index.php"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
<li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
<li><a href="../../index3.html"><i class="fa fa-circle-o"></i> Dashboard v3</a></li>
<li><a href="../../index4.html"><i class="fa fa-circle-o"></i> Dashboard v4</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
<li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
<li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-th"></i>
<span>App</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="../widgets/widgets.html"><i class="fa fa-circle-o"></i> Widgets</a></li>
<li><a href="../widgets/weather.html"><i class="fa fa-circle-o"></i> Weather</a></li>
</ul>
</li>
<li>
<a href="../widgets/calendar.html">
<i class="fa fa-calendar"></i> <span>Calendar</span>
<span class="pull-right-container">
<small class="label pull-right bg-red">3</small>
<small class="label pull-right bg-blue">17</small>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-pie-chart"></i>
<span>Charts</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
<li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
<li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
<li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
</ul>
</li>
<li class="treeview active">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-circle-o"></i> General</a></li>
<li><a href="cards.html"><i class="fa fa-circle-o"></i> User Cards</a></li>
<li class="active"><a href="tab.html"><i class="fa fa-circle-o"></i> Tab</a></li>
<li><a href="icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
<li><a href="sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
<li><a href="timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
<li><a href="modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
<li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
<li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
<li><a href="../forms/form-validation.html"><i class="fa fa-circle-o"></i> Form Validation</a></li>
<li><a href="../forms/form-wizard.html"><i class="fa fa-circle-o"></i> Form Wizard</a></li>
<li><a href="../forms/code-editor.html"><i class="fa fa-circle-o"></i> Code Editor</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
<li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
</ul>
</li>
<li>
<a href="../mailbox/mailbox.html">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<span class="pull-right-container">
<small class="label pull-right bg-yellow">12</small>
<small class="label pull-right bg-green">16</small>
<small class="label pull-right bg-red">5</small>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-map"></i> <span>Map</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="../map/map-google.html"><i class="fa fa-circle-o"></i> Google Map</a></li>
<li><a href="../map/map-vector.html"><i class="fa fa-circle-o"></i> Vector Map</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Sample Pages</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="../examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
<li><a href="../examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
<li><a href="../examples/gallery.html"><i class="fa fa-circle-o"></i> Gallery</a></li>
<li><a href="../examples/login.php"><i class="fa fa-circle-o"></i> Login</a></li>
<li><a href="../examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
<li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
<li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
<li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
<li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
<li><a href="../examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-share"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
<li class="treeview">
<a href="#"><i class="fa fa-circle-o"></i> Level One
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
<li class="treeview">
<a href="#"><i class="fa fa-circle-o"></i> Level Two
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
</ul>
</section>
<!-- /.sidebar -->
<div class="sidebar-footer">
<!-- item-->
<a href="#" class="link" data-toggle="tooltip" title="" data-original-title="Settings"><i class="fa fa-cog fa-spin"></i></a>
<!-- item-->
<a href="#" class="link" data-toggle="tooltip" title="" data-original-title="Email"><i class="fa fa-envelope"></i></a>
<!-- item-->
<a href="#" class="link" data-toggle="tooltip" title="" data-original-title="Logout"><i class="fa fa-power-off"></i></a>
</div>
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Tabs
</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="breadcrumb-item"><a href="#">UI</a></li>
<li class="breadcrumb-item active">Tabs</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- tabs -->
<div class="row">
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Default Tab</h3>
<h6 class="card-subtitle">Use default tab with class <code>nav-tabs & tabcontent-border </code></h6>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab"><span class="hidden-sm-up"><i class="ion-home"></i></span> <span class="hidden-xs-down">Home</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab"><span class="hidden-sm-up"><i class="ion-person"></i></span> <span class="hidden-xs-down">Profile</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab"><span class="hidden-sm-up"><i class="ion-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active" id="home" role="tabpanel">
<div class="pad">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
<div class="tab-pane pad" id="profile" role="tabpanel">2</div>
<div class="tab-pane pad" id="messages" role="tabpanel">3</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Customtab Tab</h3>
<h6 class="card-subtitle">Use default tab with class <code>customtab</code></h6>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs customtab" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home2" role="tab"><span class="hidden-sm-up"><i class="ion-home"></i></span> <span class="hidden-xs-down">Home</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile2" role="tab"><span class="hidden-sm-up"><i class="ion-person"></i></span> <span class="hidden-xs-down">Profile</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages2" role="tab"><span class="hidden-sm-up"><i class="ion-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home2" role="tabpanel">
<div class="pad">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
<div class="tab-pane pad" id="profile2" role="tabpanel">2</div>
<div class="tab-pane pad" id="messages2" role="tabpanel">3</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Vertical Tab</h3>
<h6 class="card-subtitle">Use default tab with class <code>vtabs & tabs-vertical</code></h6>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<div class="vtabs">
<ul class="nav nav-tabs tabs-vertical" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home4" role="tab"><span class="hidden-sm-up"><i class="ion-home"></i></span> <span class="hidden-xs-down">Home</span> </a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile4" role="tab"><span class="hidden-sm-up"><i class="ion-person"></i></span> <span class="hidden-xs-down">Profile</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages4" role="tab"><span class="hidden-sm-up"><i class="ion-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home4" role="tabpanel">
<div class="pad">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
<div class="tab-pane pad" id="profile4" role="tabpanel">2</div>
<div class="tab-pane pad" id="messages4" role="tabpanel">3</div>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Customtab vertical Tab</h3>
<h6 class="card-subtitle">Use default tab with class <code>vtabs, tabs-vertical & customvtab</code></h6>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<div class="vtabs customvtab">
<ul class="nav nav-tabs tabs-vertical" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home3" role="tab" aria-expanded="true"><span class="hidden-sm-up"><i class="ion-home"></i></span> <span class="hidden-xs-down">Home</span> </a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile3" role="tab" aria-expanded="false"><span class="hidden-sm-up"><i class="ion-person"></i></span> <span class="hidden-xs-down">Profile</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages3" role="tab" aria-expanded="false"><span class="hidden-sm-up"><i class="ion-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home3" role="tabpanel" aria-expanded="true">
<div class="pad">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
<div class="tab-pane pad" id="profile3" role="tabpanel" aria-expanded="false">2</div>
<div class="tab-pane pad" id="messages3" role="tabpanel" aria-expanded="false">3</div>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Tab with dropdown</h3>
<h6 class="card-subtitle">Use default tab with class <code>nav-tabs & tabcontent-border</code></h6>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home5" role="tab" aria-controls="home5" aria-expanded="true"><span class="hidden-sm-up"><i class="ion-home"></i></span> <span class="hidden-xs-down">Home</span></a> </li>
<li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile"><span class="hidden-sm-up"><i class="ion-person"></i></span> <span class="hidden-xs-down">Profile</span></a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-up"><i class="ion-email"></i></span> <span class="hidden-xs-down">Dropdown</span>
</a>
<div class="dropdown-menu"> <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> </div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabcontent-border pad" id="myTabContent">
<div role="tabpanel" class="tab-pane fade show active" id="home5" aria-labelledby="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Customtab2 Tab</h3>
<h6 class="card-subtitle">Use default tab with class <code>customtab</code></h6>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs customtab2" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home7" role="tab"><span class="hidden-sm-up"><i class="ion-home"></i></span> <span class="hidden-xs-down">Home</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile7" role="tab"><span class="hidden-sm-up"><i class="ion-person"></i></span> <span class="hidden-xs-down">Profile</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages7" role="tab"><span class="hidden-sm-up"><i class="ion-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home7" role="tabpanel">
<div class="pad">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
<div class="tab-pane pad" id="profile7" role="tabpanel">2</div>
<div class="tab-pane pad" id="messages7" role="tabpanel">3</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Nav Pills Tabs</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<ul class="nav nav-pills margin-bottom margin-top-10">
<li class=" nav-item"> <a href="#navpills-1" class="nav-link active" data-toggle="tab" aria-expanded="false">Tab One</a> </li>
<li class="nav-item"> <a href="#navpills-2" class="nav-link" data-toggle="tab" aria-expanded="false">Tab Two</a> </li>
<li class="nav-item"> <a href="#navpills-3" class="nav-link" data-toggle="tab" aria-expanded="true">Tab Three</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="navpills-1" class="tab-pane active">
<div class="row">
<div class="col-md-4"> <img src="../../images/card/img1.jpg" class="img-fluid"> </div>
<div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
<p>
<br/> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
</div>
</div>
</div>
<div id="navpills-2" class="tab-pane">
<div class="row">
<div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
<p>
<br/> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
</div>
<div class="col-md-4"> <img src="../../images/card/img2.jpg" class="img-fluid"> </div>
</div>
</div>
<div id="navpills-3" class="tab-pane">
<div class="row">
<div class="col-md-4"> <img src="../../images/card/img3.jpg" class="img-fluid"> </div>
<div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
<p>
<br/> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Nav Pills Tabs</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<ul class="nav nav-pills justify-content-end margin-bottom margin-top-10">
<li class=" nav-item"> <a href="#navpills2-1" class="nav-link active" data-toggle="tab" aria-expanded="false">Tab One</a> </li>
<li class="nav-item"> <a href="#navpills2-2" class="nav-link" data-toggle="tab" aria-expanded="false">Tab Two</a> </li>
<li class="nav-item"> <a href="#navpills2-3" class="nav-link" data-toggle="tab" aria-expanded="true">Tab Three</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="navpills2-1" class="tab-pane active">
<div class="row">
<div class="col-md-4"> <img src="../../images/card/img1.jpg" class="img-fluid"> </div>
<div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
<p>
<br/> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
</div>
</div>
</div>
<div id="navpills2-2" class="tab-pane">
<div class="row">
<div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
<p>
<br/> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
</div>
<div class="col-md-4"> <img src="../../images/card/img2.jpg" class="img-fluid"> </div>
</div>
</div>
<div id="navpills2-3" class="tab-pane">
<div class="row">
<div class="col-md-4"> <img src="../../images/card/img3.jpg" class="img-fluid"> </div>
<div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
<p>
<br/> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Tab with icon</h3>
<h6 class="card-subtitle">Use default tab with class <code>nav-tabs & tabcontent-border </code></h6>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home8" role="tab"><span><i class="ion-home"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile8" role="tab"><span><i class="ion-person"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages8" role="tab"><span><i class="ion-email"></i></span></a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active" id="home8" role="tabpanel">
<div class="pad">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
<div class="tab-pane pad" id="profile8" role="tabpanel">2</div>
<div class="tab-pane pad" id="messages8" role="tabpanel">3</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-12 col-lg-6">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="card-title">Customtab vertical Tab Icon</h3>
<h6 class="card-subtitle">Use default tab with class <code>vtabs & tabs-vertical</code></h6>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Nav tabs -->
<div class="vtabs">
<ul class="nav nav-tabs tabs-vertical" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home9" role="tab"><span><i class="ion-home"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile9" role="tab"><span><i class="ion-person"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages9" role="tab"><span><i class="ion-email"></i></span></a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home9" role="tabpanel">
<div class="pad">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
<div class="tab-pane pad" id="profile9" role="tabpanel">2</div>
<div class="tab-pane pad" id="messages9" role="tabpanel">3</div>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- END tabs -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right d-none d-sm-inline-block">
<b>Version</b> 1.2.1
</div>Copyright © 2017 <a href="https://www.multipurposethemes.com/">Multi-Purpose Themes</a>. All Rights Reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="nav-item"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li class="nav-item"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-cog fa-spin"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Admin Birthday</h4>
<p>Will be July 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Jhone Updated His Profile</h4>
<p>New Email : jhone_doe@demo.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Disha Joined Mailing List</h4>
<p>disha@demo.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Code Change</h4>
<p>Execution time 15 Days</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Web Design
<span class="label label-danger pull-right">40%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 40%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Data
<span class="label label-success pull-right">75%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 75%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Order Process
<span class="label label-warning pull-right">89%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 89%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Development
<span class="label label-primary pull-right">72%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 72%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<input type="checkbox" id="report_panel" class="chk-col-grey" >
<label for="report_panel" class="control-sidebar-subheading ">Report panel usage</label>
<p>
general settings information
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<input type="checkbox" id="allow_mail" class="chk-col-grey" >
<label for="allow_mail" class="control-sidebar-subheading ">Mail redirect</label>
<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<input type="checkbox" id="expose_author" class="chk-col-grey" >
<label for="expose_author" class="control-sidebar-subheading ">Expose author name</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<input type="checkbox" id="show_me_online" class="chk-col-grey" >
<label for="show_me_online" class="control-sidebar-subheading ">Show me as online</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<input type="checkbox" id="off_notifications" class="chk-col-grey" >
<label for="off_notifications" class="control-sidebar-subheading ">Turn off notifications</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
<a href="javascript:void(0)" class="text-red margin-r-5"><i class="fa fa-trash-o"></i></a>
Delete chat history
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- jQuery 3 -->
<script src="../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
<!-- popper -->
<script src="../../assets/vendor_components/popper/dist/popper.min.js"></script>
<!-- Bootstrap v4.0.0-beta -->
<script src="../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
<!-- maximum_admin App -->
<script src="../../js/template.js"></script>
<!-- maximum_admin for demo purposes -->
<script src="../../js/demo.js"></script>
</body>
<!-- Mirrored from www.multipurposethemes.com/html-templates/admin-templates/bootstrap-4/maximumadmin/pages/UI/tab.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 09 Oct 2017 12:04:32 GMT -->
</html>