Untitled

<style>
      .product-nav {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      }

      .product-nav li {
        padding: 0;
        display: inline-block;
        min-width: min-content;
        margin: 0 20px -1px;
      }

      .product-nav .active {
        color: red;
        border-bottom: 3px solid #000;
      }

      .product-nav .active {
        left: 0;
        /* transform-origin: bottom; */
        transition: transform 0.25s;
        transform: scaleY(1);
        bottom: 0;
      }

      .product-desc div.card {
        display: none;
      }

      .product-desc div.card.active {
        display: block;
      }

      .card .img-txt-cont {
        display: flex;
        margin-bottom: 20px;
      }

      .card .img-txt-cont .img-cont {
        align-self: center;
      }

      .card .img-txt-cont .txt-cont {
        align-self: center;
      }

      .card .img-txt-cont .img-cont img {
        border-radius: 50%;
        padding-right: 12px;
      }

      .results-card {
        padding: 15px 15px 15px 15px;
        border-radius: 12px 12px 12px 12px;
        box-shadow: 3px 3px 10px 0px #b4b736;
        text-align: center;
        margin-bottom: 20px;
      }

      .results-card img {
        width: 75%;
        border-radius: 7%;
        transform: scale(0.9);
      }

      .results-card img:hover {
        animation-name: grow-img;
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }

      @media screen and (min-width: 767px) {
        .card.active {
          display: flex !important;
          flex-wrap: wrap;
        }

        .card.active:first-child {
          margin: 0 20px;
        }

        .results-card {
          width: calc(33.33% - 30px - 40px);
          margin: 0 20px;
        }

        .card .img-txt-cont {
          width: calc(50% - 40px);
          margin-bottom: 30px;
          padding: 0 20px;
        }
      }

      @keyframes grow-img {
        to {
          transform: scale(1);
        }
      }
    </style>
    <ul class="product-nav">
      <li>Description</li>
      <li class="active">Key Results</li>
      <li>Key Ingredients</li>
    </ul>

    <div class="product-desc">
      <div class="card">
        <p><strong>Quantity </strong>: 200ml</p>
        <p>
          Hi.. I am a super nourishing scalp and hair champi oil enriched with
          the perfect blend of natural essential oils. I am dermatologically
          tested, clinically-proven, 100% vegan, and free from all toxic
          chemicals, which makes me completely safe for your little munchkin.
          Using me every day for a relaxing massage session will strengthen the
          connection between you and your little angel. I will not only
          stimulate healthy blood flow but also moisturise your child’s scalp. I
          shall provide hydration and promote shinier and softer hair growth. I
          also help cure dry scalp, scalp itchiness, and cradle cap.
        </p>
      </div>

      <div class="card active">
        <div class="results-card">
          <div class="img-container">
            <img
              src="https://www.shushubabies.com/wp-content/uploads/2022/04/skin-hydration.webp"
            />
          </div>
          <div class="txt-container">
            <h3>Skin Hydration</h3>
            <p>
              Deeply cleanses and prevents skin dryness with a moisturization
              lasting longer than 24 hours.
            </p>
          </div>
        </div>

        <div class="results-card">
          <div class="img-container">
            <img
              src="https://www.shushubabies.com/wp-content/uploads/2022/04/skin-hydration.webp"
            />
          </div>
          <div class="txt-container">
            <h3>Skin Hydration</h3>
            <p>
              Deeply cleanses and prevents skin dryness with a moisturization
              lasting longer than 24 hours.
            </p>
          </div>
        </div>

        <div class="results-card">
          <div class="img-container">
            <img
              src="https://www.shushubabies.com/wp-content/uploads/2022/04/skin-hydration.webp"
            />
          </div>
          <div class="txt-container">
            <h3>Skin Hydration</h3>
            <p>
              Deeply cleanses and prevents skin dryness with a moisturization
              lasting longer than 24 hours.
            </p>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="img-txt-cont">
          <div class="img-cont">
            <img
              src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp"
            />
          </div>
          <div class="txt-cont">
            <h5>Orange and Mandarin Essential Oil</h5>
            <p>
              It is enriched with Vitamin C that uplifts the mood of irritated
              babies. Orange and Mandarin neutralize skin toxins and promote
              healthy skin.
            </p>
          </div>
        </div>
        <div class="img-txt-cont">
          <div class="img-cont">
            <img
              src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp"
            />
          </div>
          <div class="txt-cont">
            <h5>Orange and Mandarin Essential Oil</h5>
            <p>
              It is enriched with Vitamin C that uplifts the mood of irritated
              babies. Orange and Mandarin neutralize skin toxins and promote
              healthy skin.
            </p>
          </div>
        </div>
        <div class="img-txt-cont">
          <div class="img-cont">
            <img
              src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp"
            />
          </div>
          <div class="txt-cont">
            <h5>Orange and Mandarin Essential Oil</h5>
            <p>
              It is enriched with Vitamin C that uplifts the mood of irritated
              babies. Orange and Mandarin neutralize skin toxins and promote
              healthy skin.
            </p>
          </div>
        </div>
      </div>
    </div>

    <script>
      const formNav = document.querySelector('.product-nav');
      const formSections = document.querySelectorAll('.product-desc .card');

      function setActiveElement(element, formSection) {
        formNav.querySelectorAll('li').forEach((el) => {
          el.classList.remove('active');
        });
        formSections.forEach((el) => {
          el.classList.remove('active');
        });
        element.classList.add('active');
        formSection.classList.add('active');
      }

      formNav.querySelectorAll('li').forEach((element, index) => {
        element.addEventListener('click', () => {
          setActiveElement(element, formSections[index]);
          console.log(index);
        });
      });
    </script>