JSFiddle - React, Tailwind, and code Playground

by Sacred13

HTML

<div class="bh">
                          <div class="bh-tabs control">
                            <div class="bh-i bh-green gm-hide sz" data-tab-area="tb-all">Show All</div>
                            <div class="bh-i bh-button sz" data-tab-area="tb-indor">Interior</div>
                            <div class="bh-i bh-dark sz outdoor_tab" data-tab-area="tb-outdoor">Exterior</div>
                            <div class="bh-i bh-gray sz" data-tab-area="tb-house">Full Home</div>
                          </div>
                          <div class="bh-small-text">Click on the category of your choice.</div>
                          <div class="bh-tabs bht-s">
                            <div class="bh-i tb-house sg-popup-id-7955" data-tab-content-area="tb-house"> ADU's </div>
                            <div class="bh-i tb-outdoor" data-tab-content-area="tb-outdoor"> Backyards </div>
                            <div class="bh-i tb-indor" data-tab-content-area="tb-indor"> Balconies </div>
                            <div class="bh-i tb-indor" data-tab-content-area="tb-indor"> Bathrooms </div>
                            <div class="bh-i tb-outdoor" data-tab-content-area="tb-outdoor"> Benches </div>
                            <div class="bh-i tb-outdoor" data-tab-content-area="tb-outdoor"> BB-Q's </div>
                            <div class="bh-i tb-indor" data-tab-content-area="tb-indor"> Cabinetry </div>
                            <div class="bh-i tb-house" data-tab-content-area="tb-house"> Construction </div>
                            <div class="bh-i tb-house" data-tab-content-area="tb-house"> Design </div>
                            <div class="bh-i tb-house" data-tab-content-area="tb-house"> Drafting </div>
                            <div class="bh-i tb-indor" data-tab-content-area="tb-indor"> Ceilings </div>
                            <div class="bh-i tb-indor" data-tab-content-area="tb-indor"> Closets </div>
                            <div...

CSS

* {
  margin: 0;
  padding: 0;
  outline: 0;
}
#top {
    display:none;
}
.showcase {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	padding: 0 20px;
}
.video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center
		center/cover;
}
.video-container video {
	min-width: 100%;
	min-height: 100%;
  position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}
.video-container:after {
	content: '';
	z-index: 1;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
}

.content {
	z-index: 2;
}

/* ********************* COLORS ********************* */
/* ********************* COLORS ********************* */
/* ********************* COLORS ********************* */
.bh-tabs 	{color: #fff;}
.bh-i 		{background-color: #988676;}
.sha:hover 		{background-color: #CCC;border: 1px solid #CCC;}
.control .bh-i:hover {background-color: #FFFFFF;border: 1px solid #000;color: #000;cursor:pointer;}
.bh-green 	{background-color: #FFFFFF;border: 1px solid #000;color: #000;}
.bh-button  {background-color: #817877;border: 1px solid transparent;}
.tb-indor 	{background-color: #817877;border: 1px solid transparent;}
.bh-gray 	{background-color: #6A6F7A;border: 1px solid transparent;}
.tb-house 	{background-color: #6A6F7A;border: 1px solid transparent;}
.bh-dark 	{background-color: #E5E6E9;border: 1px solid transparent;}
.tb-outdoor {background-color: #E5E6E9;border: 1px solid transparent; color: #2C2A2B}
.outdoor_tab {color: #2C2A2B !important}
/* ********************* COLORS ********************* */
/* ********************* COLORS ********************* */
/* ********************* COLORS ********************* */

.bh-small-text {
  width: 100%;
  text-align: center;
  font-size: 1.2em;
 ...

JavaScript

const ANIMATION_KEYFRAME = [
  {
    // filter: "blur(30px)",
    transform: "scale(0.8) translate(0, 80%)",
    transformOrigin: "center",
    opacity: 0,
  },
  {
    // filter: "none",
    transform: "none",
    transformOrigin: "center",
    opacity: 1,
  },
];

const ANIMATION_OPTIONS = {
  delay: 0,
  fill: "forwards",
  easing: "cubic-bezier(0,.99,.32,.99)",
  direction: "normal",
};

class TabsComponent {
  constructor(
    tabsArea = "data-tab-area",
    contentArea = "data-tab-content-area",
    allTargetName = "tb-all",
    activeClass = "--is-active",
    hideClass = "gm-hide"
  ) {
    this.tabsArea = tabsArea;
    this.contentArea = contentArea;

    this.tabs = document.querySelectorAll(`[${this.tabsArea}]`);
    this.contents = document.querySelectorAll(`[${this.contentArea}]`);

    this.allTargetName = allTargetName;
    this.activeClass = activeClass;
    this.hideClass = hideClass;
  }

  appleEffect(item, count = 1, delta = 0.026) {
    item.animate(ANIMATION_KEYFRAME, {
      ...ANIMATION_OPTIONS,
      duration: Math.round((100 * count) / 2 + delta),
    });
  }

  tabHendler(elm) {
    let attr = elm.getAttribute(this.tabsArea);

    for (let item of this.tabs) {
      let elm = item.getAttribute(this.tabsArea);

      if (elm === attr && attr === this.allTargetName) {
        item.classList.add(this.activeClass);
        item.classList.add(this.hideClass);
      } else if (elm === attr) {
        item.classList.add(this.activeClass);
      } else {
        item.classList.remove(this.activeClass);
        item.classList.remove(this.hideClass);
      }
    }

    this.contents.forEach((item, index) => {
      let itemAttr = item.getAttribute(this.contentArea);

      itemAttr !== attr && attr !== this.allTargetName
        ? item.classList.add(this.hideClass)
        : item.classList.remove(this.hideClass);

      this.appleEffect(item, index);
    });
  }

  init() {
    this.tabHendler(this.tabs[0]);
    this.tabs.forEach((item) =>
     ...