Create Your Own Custom Tabbed Content

x-custom-tabs.css

/** flex the tabs to make the shrink down for mobile **/

#tabsection .x-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
#tabsection .x-column {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

/** remove the margin and use a pointer mouse cursor to resemble a link **/

#tabsection img {
  margin: 0;
  cursor: pointer;
}

/** set the text section to relative and hide the overflow **/

#textsection {
  position: relative;
  overflow: hidden;
}

/** set each content row to relative, set an opacity,
and use a transition to animate the tabs **/

#textsection .x-container {
  position: relative;
  top: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-perspective: 1000;
          perspective: 1000;
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

/** create the .hidden class and set the rows to absolute to remove them
from the container, and opacity to 0 to fade them out. **/

#textsection .hidden {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}