<div class="grid">
  <ul class="tab-list">
    <li class="active">
      <a href="">
        <span class="dot"></span>
        <span>Bald Eagle</span>
      </a>
    </li>
    <li>
      <a href="">
        <span class="dot"></span>
        <span>Golden Eagle</span>
      </a>
    </li>
    <li>
      <a href="">
        <span class="dot"></span>
        <span>Common Tern</span>
      </a>
    </li>
    <li>
      <a href="">
        <span class="dot"></span>
        <span>Great Blue Heron</span>
      </a>
    </li>
    <li>
      <a href="">
        <span class="dot"></span>
        <span>Hawk</span>
      </a>
    </li>
  </ul>
  <ul class="tab-panels">
    <li class="active">
      <h2>Bald Eagle</h2>
      <p>The bald eagle (Haliaeetus leucocephalus) is a bird of prey found in North America. A sea eagle, it has two known subspecies and forms a species pair with the white-tailed eagle (Haliaeetus albicilla), which occupies the same niche as the bald eagle in the Palearctic. Its range includes most of Canada and Alaska, all of the contiguous United States, and northern Mexico. It is found near large bodies of open water with an abundant food supply and old-growth trees for nesting.</p>
      <p>
        <a href="https://en.wikipedia.org/wiki/Bald_eagle" target="_blank">Read More</a>
      </p>
    </li>
    <li>
      <h2>Golden Eagle</h2>
      <p>The golden eagle (Aquila chrysaetos) is a bird of prey living in the Northern Hemisphere. It is the most widely distributed species of eagle. Like all eagles, it belongs to the family Accipitridae. They are one of the best-known birds of prey in the Northern Hemisphere. These birds are dark brown, with lighter golden-brown plumage on their napes. Immature eagles of this species typically have white on the tail and often have white markings on the wings. Golden eagles use their agility and speed combined with powerful feet and large, sharp talons to hunt a variety of prey, mainly hares, rabbits, and marmots and other ground squirrels.</p>
      <p>
        <a href="https://en.wikipedia.org/wiki/Golden_eagle" target="_blank">Read More</a>
      </p>
    </li>
    <li>
      <h2>Common Tern</h2>
      <p>The common tern (Sterna hirundo) is a seabird in the family Laridae. This bird has a circumpolar distribution, its four subspecies breeding in temperate and subarctic regions of Europe, Asia and North America. It is strongly migratory, wintering in coastal tropical and subtropical regions. Breeding adults have light grey upperparts, white to very light grey underparts, a black cap, orange-red legs, and a narrow pointed bill. Depending on the subspecies, the bill may be mostly red with a black tip or all black. There are several similar species, including the partly sympatric Arctic tern, which can be separated on plumage details, leg and bill colour, or vocalisations.</p>
      <p>
        <a href="https://en.wikipedia.org/wiki/Common_tern" target="_blank">Read More</a>
      </p>
    </li>
    <li>
      <h2>Great Blue Heron</h2>
      <p>The great blue heron (Ardea herodias) is a large wading bird in the heron family Ardeidae, common near the shores of open water and in wetlands over most of North and Central America, as well as far northwestern South America, the Caribbean and the Galápagos Islands. It is occasionally found in the Azores and is a rare vagrant to Europe. An all-white population found in south Florida and the Florida Keys is known as the great white heron. Debate exists about whether these white birds are a color morph of the great blue heron, a subspecies of it, or an entirely separate species.</p>
      <p>
        <a href="https://en.wikipedia.org/wiki/Great_blue_heron" target="_blank">Read More</a>
      </p>
    </li>
    <li>
      <h2>Hawk</h2>
      <p>Hawks are birds of prey of the family Accipitridae. They are very widely distributed and are found on all continents except Antarctica.</p>
      <ul>
        <li>
          The subfamily Accipitrinae includes goshawks, sparrowhawks, sharp-shinned hawks, and others. This subfamily are mainly woodland birds with short broad wings, long tails, and high visual acuity. They hunt by dashing suddenly from a concealed perch.
        </li>
        <li>
          In America, members of the Buteo group are also called hawks; this group is called buzzards in other parts of the world. Generally, buteos have broad wings and sturdy builds. They are relatively larger-winged and shorter-tailed than accipiters, and fly further distances in open areas. Buteos descend or pounce on their prey rather than hunting in a fast horizontal pursuit.
        </li>
      </ul>
      <p>
        <a href="https://en.wikipedia.org/wiki/Great_blue_heron" target="_blank">Read More</a>
      </p>
    </li>
  </ul>
</div>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root {
  --stepper-outline-color: #386641;
  --stepper-active-color: #4f772d;
  --stepper-connector-color: #90a955;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
}

body {
  font-family: "Poppins", sans-serif;
  margin: 50px 0;
}

/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 70px;
  max-width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
}

.grid > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-list {
  padding: 0 10px;
  margin: 0 auto;
}

.tab-list li {
  display: flex;
}

.tab-list li:not(:last-child) {
  margin-bottom: 40px;
}

.tab-list a {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  text-decoration: none;
}

.tab-list a .dot {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--stepper-outline-color);
}

.tab-list li a .dot::before,
.tab-list li:not(:last-child) a .dot::after {
  content: "";
  position: absolute;
  left: 50%;
}

.tab-list li a .dot::before {
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--stepper-active-color);
  transition: transform 0.3s;
}

.tab-list li:not(:last-child) a .dot::after {
  top: calc(100% + 1px);
  transform: translateX(-50%);
  height: 40px;
  border-left: 2px dashed var(--stepper-connector-color);
}

.tab-list li.active a {
  font-weight: bold;
}

.tab-list li.active a .dot::before {
  transform: translate(-50%, -50%) scale(1);
}

.tab-panels {
  display: grid;
  overflow: hidden;
}

.tab-panels > li {
  grid-area: 1/1;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.35s ease-in-out, transform 0.7s ease-in-out;
}

.tab-panels > li.active {
  opacity: 1;
  transform: none;
}

.tab-panels h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid #ededed;
  margin: 0 0 20px;
}

@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tab-list {
    display: flex;
    justify-content: center;
  }

  .tab-list li:not(:last-child) {
    margin: 0 40px 0 0;
  }

  .tab-list li a span:last-child {
    display: none;
  }

  .tab-list a {
    gap: 0;
  }

  .tab-list li:not(:last-child) a .dot::after {
    top: 50%;
    left: calc(100% + 1px);
    transform: translateY(-50%);
    width: 40px;
    height: auto;
    border-bottom: 2px dashed var(--stepper-connector-color);
    border-left: 0;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 0.9em;
  background: white;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}
const tabList = document.querySelector(".tab-list");
const tabItems = tabList.querySelectorAll("li");
const firstTabListItem = tabList.querySelector("li:first-child");
const lastTabListItem = tabList.querySelector("li:last-child");
const tabLinks = tabList.querySelectorAll("a");
const tabPanelsList = document.querySelector(".tab-panels");
const tabPanels = tabPanelsList.querySelectorAll("li");
const mqSm = window.matchMedia("(max-width: 700px)");
const mqLg = window.matchMedia("(min-width: 701px)");
const ACTIVE_CLASS = "active";

for (const tabLink of tabLinks) {
  tabLink.addEventListener("click", function (e) {
    e.preventDefault();
    tabList.querySelector(`li.${ACTIVE_CLASS}`).classList.remove(ACTIVE_CLASS);
    tabPanelsList
      .querySelector(`li.${ACTIVE_CLASS}`)
      .classList.remove(ACTIVE_CLASS);

    const parent = tabLink.parentElement;
    let parentIndex = Array.from(tabItems).indexOf(parent);
    parent.classList.add(ACTIVE_CLASS);
    tabPanelsList
      .querySelector(`li:nth-child(${++parentIndex})`)
      .classList.add(ACTIVE_CLASS);
  });
}

// keyboard navigation
tabList.addEventListener("keyup", function (e) {
  const activeTabListItem = tabList.querySelector(`li.${ACTIVE_CLASS}`);

  if (
    e.key === "ArrowUp" ||
    e.key === "ArrowDown" ||
    e.key === "ArrowLeft" ||
    e.key === "ArrowRight"
  ) {
    if (
      (mqSm.matches && (e.key === "ArrowUp" || e.key === "ArrowDown")) ||
      (mqLg.matches && (e.key === "ArrowLeft" || e.key === "ArrowRight"))
    ) {
      return;
    }

    if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
      const prevActiveTabListItem = activeTabListItem.previousElementSibling
        ? activeTabListItem.previousElementSibling
        : lastTabListItem;
      prevActiveTabListItem.querySelector("a").click();
    } else {
      const nextActiveTabListItem = activeTabListItem.nextElementSibling
        ? activeTabListItem.nextElementSibling
        : firstTabListItem;
      nextActiveTabListItem.querySelector("a").click();
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.