TV Show Aside Header
Component #1
<!-- movie aside header -->
<section class="space-1 bg-gray-2800">
<div class="container my-3">
<div class="row">
<div class="offset-md-5 offset-lg-4 col-md-7 col-lg-8">
<!-- Nav -->
<div class="text-center tab-nav__v1">
<ul class="nav mb-2 mb-md-7" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-one-code-example2-tab" data-toggle="pill" href="#pills-one-code-example2" role="tab" aria-controls="pills-one-code-example2" aria-selected="true">Today</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-two-code-example2-tab" data-toggle="pill" href="#pills-two-code-example2" role="tab" aria-controls="pills-two-code-example2" aria-selected="false">This week</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-three-code-example2-tab" data-toggle="pill" href="#pills-three-code-example2" role="tab" aria-controls="pills-three-code-example2" aria-selected="false">Last 30 days</a>
</li>
</ul>
</div>
<!-- End Nav -->
</div>
</div>
<div class="row">
<div class="col">
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-one-code-example2" role="tabpanel" aria-labelledby="pills-one-code-example2-tab">
<div class="row">
<div class="col-md-5 col-lg-4 mb-3 mb-md-5">
<header class="max-w-370 mt-auto mb-xl-8 title-dash">
<h1 class="display-7 mb-3 font-weight-semi-bold">Popular TV Series Right Now</h1>
</header>
</div>
<div class="col-md-7 col-lg-8 mb-md-5">
<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 mx-n2">
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-lg-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Unbreakable Kimmy Schmidt</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img4.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">House of cards</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 mx-n2">
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img6.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img7.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Unbreakable Kimmy Schmidt</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-lg-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img8.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">House of cards</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img9.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img10.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-two-code-example2" role="tabpanel" aria-labelledby="pills-two-code-example2-tab">
<div class="row">
<div class="col-md-5 col-lg-4 mb-3 mb-md-5">
<header class="max-w-370 mt-auto mb-xl-8 title-dash">
<h1 class="display-7 mb-3 font-weight-semi-bold">Popular TV Series Right Now</h1>
</header>
</div>
<div class="col-md-7 col-lg-8 mb-md-5">
<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 mx-n2">
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img10.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img9.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-lg-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img8.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Unbreakable Kimmy Schmidt</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img7.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">House of cards</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 mx-n2">
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img6.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img4.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Unbreakable Kimmy Schmidt</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-lg-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">House of cards</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-three-code-example2" role="tabpanel" aria-labelledby="pills-three-code-example2-tab">
<div class="row">
<div class="col-md-5 col-lg-4 mb-3 mb-md-5">
<header class="max-w-370 mt-auto mb-xl-8 title-dash">
<h1 class="display-7 mb-3 font-weight-semi-bold">Popular TV Series Right Now</h1>
</header>
</div>
<div class="col-md-7 col-lg-8 mb-md-5">
<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 mx-n2">
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-lg-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Unbreakable Kimmy Schmidt</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img4.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">House of cards</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 mx-n2">
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img6.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img7.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Unbreakable Kimmy Schmidt</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-lg-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img8.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Mystery</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">House of cards</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img9.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Chicago Med</a></div>
</div>
</div>
<div class="col px-2 mb-5 mb-md-0 d-md-none d-xl-block">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/222x126/img10.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Last Man on the earth</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Tab Content -->
</div>
</div>
</div>
</section>
<!-- End movie aside header -->