
<!DOCTYPE html>
<html>
<head> 
    <meta charset = "utf-8"> 
    <title>Table</title>
    <link rel="icon" href="images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css"> 
</head> 
<body>

    <section class="p-tabs my-xl-5 my-md-5 my-4">
        <div class="container">
            <div class="panel panel-default"> 
                <div class="panel-heading">
                    <div class="panel-title">
                        <ul id="exTab1" class="nav nav-tabs row align-items-center text-center tab-2 border-0">
                            <li class="col-4 position-relative d-flex justify-content-start">
                                <a href="#1" data-toggle="tab" class="active show">
                                  <h1 class="p-0 m-0 font-weight-normal d-flex justify-content-center align-items-center">Select</h1>
                              </a>
                          </li>
                          <li class="col-4 position-relative d-flex justify-content-center">
                            <a href="#2" data-toggle="tab" class="disabled-tab">
                              <h1 class="p-0 m-0 font-weight-normal d-flex justify-content-center align-items-center">Display</h1>
                          </a>
                      </li>
                      <li class="col-4 position-relative d-flex justify-content-end">
                        <a href="#3" data-toggle="tab" class="disabled-tab">
                          <h1 class="p-0 m-0 font-weight-normal d-flex justify-content-center align-items-center">Zoom In</h1>
                      </a>
                  </li>
              </ul>
          </div>
      </div>

      <div class="p-tabs-section">
        <div class="tab-content">
            <!-- Select Tab  -->
            <div class="tab-pane active" id="1">
                <div class="panel-body p-xl-4 p-md-4 p-2 br-rounded">
                    <div class="p-2">
                        <ul class="row align-items-center border-0 p-0 m-0">
                            <li class="col-4 position-relative d-flex justify-content-start outdoor">
                                <div class="w-100 csr-ptr">
                                  <h4 class="p-0 mb-2 font-weight-normal">Outdoors</h4>
                                  <img src="images/outdoor.jpg" class="w-100">
                              </div>
                          </li>

                          <li class="col-4 position-relative d-flex justify-content-start racing">
                            <div class="w-100 csr-ptr">
                              <h4 class="p-0 mb-2 font-weight-normal">Racing</h4>
                              <img src="images/racing.jpg" class="w-100">
                          </div>

                      </li>
                      <li class="col-4 position-relative d-flex justify-content-start helicopter">
                        <div class="w-100 csr-ptr">
                          <h4 class="p-0 mb-2 font-weight-normal">Helicopter</h4>
                          <img src="images/helicopter.jpg" class="w-100">
                      </div>
                  </li>
              </ul>

          </div>
      </div>
  </div>
  <!-- Display Tab -->
  <div class="tab-pane" id="2">
    <div class="panel-body p-xl-4 p-md-4 p-2 br-rounded">
        <div class="p-2 d-flex justify-content-center">
            <ul class="p-0 m-0 font-weight-normal list-unstyled" id="tab_2_list"></ul>
        </div>
    </div>
</div>
<!-- Zoom In Tab -->
<div class="tab-pane" id="3">

</div>
<!-- All tabs contents end -->


</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>

</body>

</html>