Styling

The script itself does not take care of any styling whatsoever with the hopes that this flexibility will benefit you. That said, there is a specific html markup structure that is required, so you will need to hook your CSS rules into that structure.

It should be mentioned that the following CSS utilizes logical properties. So margin-left is replaced with margin-inline-start and so on. We like this because it automatically supports writing directions (so rtl “just works” for example). If you really must support IE11, you should probably avoid logical properties. Just replace margin-inline-start with margin-left, margin-block-start with margin-top and so on and refer to the MDN docs.

In any event, here's a basic CSS implementation to get you started:

/* The main tabs container. We use SMACSS so this cannot be omitted. For example, if you use
.tabs-vertical below, it will need to come after: class="tabs tabs-vertical" */
.tabs {
  display: flex;
  flex-direction: column;
}
.tabs-vertical {
  flex-direction: row;
}

/* The tabs list styles */
.tab-list {
  /* You can switch these colors to theme you're tabs */
  --tab-border-color: #cfd5db;
  --tab-border-focus-color: #e9ecef;
  --tab-color: #293344;
  --tab-selected-color: #426bb1;
  --tab-disabled-color: #999;
  --tab-transition-duration: 200ms;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex: 0 0 auto;
  padding-inline-start: 0;
  margin-block-end: 0;
  border-bottom: 1px solid var(--tab-border-color);
  transition-property: all;
  transition-duration: var(--tab-transition-duration);
}
/* In vertical orientation we want our tab buttons to stack */
.tabs-vertical .tab-list,
.tabs-vertical .tab-base {
  flex-direction: column;
  border: none;
}

/* The tab button styles. Essentially, we remove default button skins. Also note, we
prefer the logical properties like margin-block-start over margin-left. This allows the
CSS to work seemlessly with writing modes but comes at a price — no IE11 support. If you need
that, of course, use appropriate margins and paddings to do so. */
.tab-button {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.tab-button:not(:first-of-type) {
  margin-inline-start: -1px;
}

/* Skin of the buttons */
.tab-button {
  display: block;
  padding-block-start: 0.5rem;
  padding-block-end: 0.5rem;
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.75rem;
  line-height: 1.25rem;
  color: var(--tab-color);
  text-decoration: none;
  transition: color var(--tab-transition-duration) ease-in-out, background-color var(--tab-transition-duration) ease-in-out, border-color var(--tab-transition-duration) ease-in-out;
}

/* This essentially removes the transition when the user has set their OS settings to prefer
reduced motion. It's important to honor those settings! */
@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  .tab-button {
    --tab-transition-duration: 0.001ms !important;
  }
}

/* The following styles are such that you will have the typical tab borders on your
tab buttons. Of course you're free to do that all differently if you'd like, say,
no borders but the active tab to have an underline. You can find more examples in
the AgnosticUI tabs.css code: https://github.com/AgnosticUI/agnosticui/blob/master/agnostic-css/src/components/tabs/tabs.css */

.tab-item.tab-button {
  margin-block-end: -1px;
  background: 0 0;
  border: 1px solid transparent;
  /* Optional skinning if you want rounded tabs */
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.tab-item.tab-button.active {
  color:  var(--tab-selected-color);
  background-color: #fff;
  border-color: var(--tab-border-color) var(--tab-border-color) #fff;
}

.tab-item:hover,
.tab-button:focus {
  border-color: var(--tab-border-focus-color) var(--tab-border-focus-color) var(--tab-border-color);
  isolation: isolate;
  cursor: pointer;
}

.tabs-vertical .tab-button {
  border: none;
}