.tabs-wrapper {
  width: 100%;

  .tabs {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 0;
    padding: 0;
    list-style: none;

    a {
      display: block;
      padding: 0.7rem 2rem;
      background-color: var(--c-secondary, #f4f4f5);
      color: var(--c-muted-foreground, #71717a);
      font-weight: 600;
      font-size: 0.8rem;
      text-align: center;
      text-decoration: none;
      transition: all 0.2s ease;
      position: relative;

      &:hover {
        color: var(--c-foreground, #09090b);
      }

      &:focus {
        outline: 2px solid var(--c-primary, #2b7fff);
      }

      &[aria-current="page"] {
        color: var(--c-white, #fff);
        background-color: var(--c-primary, #2b7fff);

        &::before {
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
          width: 20px;
          height: 10px;
          background-color: var(--c-primary, #2b7fff);
          content: "";
          clip-path: polygon(0 0, 100% 0, 50% 100%);
        }
      }
    }
  }

  .content {
    width: 100%;
    padding: 1rem 0;
    background-color: var(--c-background, #fff);
  }
}

Arrow tabs (Link based)

Other Tabs UI parts

Top line tabs (Link based)

Segmented control tabs (Link based)

Filled tabs (Link based)

Other CSS UI parts

Accordions

Balloons

Boxes

Breadcrumbs

Buttons

Checkboxes

Headings and Texts

Icons

Lists

Paginations

Quotations

Read More

Search Forms

Select Boxes

Switches

Tabs

Text Boxes

Tooltips

Stack Layouts

Standard Layout

Headers