Tailwind CSS Tabs - Notus JS

<div class="flex flex-wrap" id="wrapper-for-text-blueGray">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-blueGray-600" data-tab-toggle="text-tab-profile-blueGray" onclick="changeAtiveTab(event,'wrapper-for-text-blueGray','blueGray','text-tab-profile-blueGray')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-blueGray-600 bg-white" data-tab-toggle="text-tab-settings-blueGray" onclick="changeAtiveTab(event,'wrapper-for-text-blueGray','blueGray','text-tab-settings-blueGray')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-blueGray-600 bg-white" data-tab-toggle="text-tab-options-blueGray" onclick="changeAtiveTab(event,'wrapper-for-text-blueGray','blueGray','text-tab-options-blueGray')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-blueGray">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-blueGray">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-blueGray">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-red">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-red-600" data-tab-toggle="text-tab-profile-red" onclick="changeAtiveTab(event,'wrapper-for-text-red','red','text-tab-profile-red')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-red-600 bg-white" data-tab-toggle="text-tab-settings-red" onclick="changeAtiveTab(event,'wrapper-for-text-red','red','text-tab-settings-red')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-red-600 bg-white" data-tab-toggle="text-tab-options-red" onclick="changeAtiveTab(event,'wrapper-for-text-red','red','text-tab-options-red')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-red">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-red">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-red">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-orange">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-orange-600" data-tab-toggle="text-tab-profile-orange" onclick="changeAtiveTab(event,'wrapper-for-text-orange','orange','text-tab-profile-orange')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-orange-600 bg-white" data-tab-toggle="text-tab-settings-orange" onclick="changeAtiveTab(event,'wrapper-for-text-orange','orange','text-tab-settings-orange')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-orange-600 bg-white" data-tab-toggle="text-tab-options-orange" onclick="changeAtiveTab(event,'wrapper-for-text-orange','orange','text-tab-options-orange')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-orange">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-orange">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-orange">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-amber">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-amber-600" data-tab-toggle="text-tab-profile-amber" onclick="changeAtiveTab(event,'wrapper-for-text-amber','amber','text-tab-profile-amber')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-amber-600 bg-white" data-tab-toggle="text-tab-settings-amber" onclick="changeAtiveTab(event,'wrapper-for-text-amber','amber','text-tab-settings-amber')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-amber-600 bg-white" data-tab-toggle="text-tab-options-amber" onclick="changeAtiveTab(event,'wrapper-for-text-amber','amber','text-tab-options-amber')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-amber">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-amber">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-amber">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-emerald">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-emerald-600" data-tab-toggle="text-tab-profile-emerald" onclick="changeAtiveTab(event,'wrapper-for-text-emerald','emerald','text-tab-profile-emerald')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-emerald-600 bg-white" data-tab-toggle="text-tab-settings-emerald" onclick="changeAtiveTab(event,'wrapper-for-text-emerald','emerald','text-tab-settings-emerald')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-emerald-600 bg-white" data-tab-toggle="text-tab-options-emerald" onclick="changeAtiveTab(event,'wrapper-for-text-emerald','emerald','text-tab-options-emerald')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-emerald">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-emerald">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-emerald">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-teal">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-teal-600" data-tab-toggle="text-tab-profile-teal" onclick="changeAtiveTab(event,'wrapper-for-text-teal','teal','text-tab-profile-teal')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-teal-600 bg-white" data-tab-toggle="text-tab-settings-teal" onclick="changeAtiveTab(event,'wrapper-for-text-teal','teal','text-tab-settings-teal')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-teal-600 bg-white" data-tab-toggle="text-tab-options-teal" onclick="changeAtiveTab(event,'wrapper-for-text-teal','teal','text-tab-options-teal')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-teal">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-teal">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-teal">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-lightBlue">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-lightBlue-600" data-tab-toggle="text-tab-profile-lightBlue" onclick="changeAtiveTab(event,'wrapper-for-text-lightBlue','lightBlue','text-tab-profile-lightBlue')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-lightBlue-600 bg-white" data-tab-toggle="text-tab-settings-lightBlue" onclick="changeAtiveTab(event,'wrapper-for-text-lightBlue','lightBlue','text-tab-settings-lightBlue')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-lightBlue-600 bg-white" data-tab-toggle="text-tab-options-lightBlue" onclick="changeAtiveTab(event,'wrapper-for-text-lightBlue','lightBlue','text-tab-options-lightBlue')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-lightBlue">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-lightBlue">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-lightBlue">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-indigo">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-indigo-600" data-tab-toggle="text-tab-profile-indigo" onclick="changeAtiveTab(event,'wrapper-for-text-indigo','indigo','text-tab-profile-indigo')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-indigo-600 bg-white" data-tab-toggle="text-tab-settings-indigo" onclick="changeAtiveTab(event,'wrapper-for-text-indigo','indigo','text-tab-settings-indigo')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-indigo-600 bg-white" data-tab-toggle="text-tab-options-indigo" onclick="changeAtiveTab(event,'wrapper-for-text-indigo','indigo','text-tab-options-indigo')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-indigo">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-indigo">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-indigo">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-purple">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-purple-600" data-tab-toggle="text-tab-profile-purple" onclick="changeAtiveTab(event,'wrapper-for-text-purple','purple','text-tab-profile-purple')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-purple-600 bg-white" data-tab-toggle="text-tab-settings-purple" onclick="changeAtiveTab(event,'wrapper-for-text-purple','purple','text-tab-settings-purple')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-purple-600 bg-white" data-tab-toggle="text-tab-options-purple" onclick="changeAtiveTab(event,'wrapper-for-text-purple','purple','text-tab-options-purple')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-purple">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-purple">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-purple">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-text-pink">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-pink-600" data-tab-toggle="text-tab-profile-pink" onclick="changeAtiveTab(event,'wrapper-for-text-pink','pink','text-tab-profile-pink')">
          Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-pink-600 bg-white" data-tab-toggle="text-tab-settings-pink" onclick="changeAtiveTab(event,'wrapper-for-text-pink','pink','text-tab-settings-pink')">
          Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-pink-600 bg-white" data-tab-toggle="text-tab-options-pink" onclick="changeAtiveTab(event,'wrapper-for-text-pink','pink','text-tab-options-pink')">
          Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="text-tab-profile-pink">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-settings-pink">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="text-tab-options-pink">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-blueGray">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-blueGray-600" data-tab-toggle="icon-tab-profile-blueGray" onclick="changeAtiveTab(event,'wrapper-for-icons-blueGray','blueGray','icon-tab-profile-blueGray')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-blueGray-600 bg-white" data-tab-toggle="icon-tab-settings-blueGray" onclick="changeAtiveTab(event,'wrapper-for-icons-blueGray','blueGray','icon-tab-settings-blueGray')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-blueGray-600 bg-white" data-tab-toggle="icon-tab-options-blueGray" onclick="changeAtiveTab(event,'wrapper-for-icons-blueGray','blueGray','icon-tab-options-blueGray')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-blueGray">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-blueGray">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-blueGray">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-red">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-red-600" data-tab-toggle="icon-tab-profile-red" onclick="changeAtiveTab(event,'wrapper-for-icons-red','red','icon-tab-profile-red')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-red-600 bg-white" data-tab-toggle="icon-tab-settings-red" onclick="changeAtiveTab(event,'wrapper-for-icons-red','red','icon-tab-settings-red')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-red-600 bg-white" data-tab-toggle="icon-tab-options-red" onclick="changeAtiveTab(event,'wrapper-for-icons-red','red','icon-tab-options-red')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-red">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-red">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-red">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-orange">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-orange-600" data-tab-toggle="icon-tab-profile-orange" onclick="changeAtiveTab(event,'wrapper-for-icons-orange','orange','icon-tab-profile-orange')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-orange-600 bg-white" data-tab-toggle="icon-tab-settings-orange" onclick="changeAtiveTab(event,'wrapper-for-icons-orange','orange','icon-tab-settings-orange')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-orange-600 bg-white" data-tab-toggle="icon-tab-options-orange" onclick="changeAtiveTab(event,'wrapper-for-icons-orange','orange','icon-tab-options-orange')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-orange">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-orange">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-orange">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-amber">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-amber-600" data-tab-toggle="icon-tab-profile-amber" onclick="changeAtiveTab(event,'wrapper-for-icons-amber','amber','icon-tab-profile-amber')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-amber-600 bg-white" data-tab-toggle="icon-tab-settings-amber" onclick="changeAtiveTab(event,'wrapper-for-icons-amber','amber','icon-tab-settings-amber')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-amber-600 bg-white" data-tab-toggle="icon-tab-options-amber" onclick="changeAtiveTab(event,'wrapper-for-icons-amber','amber','icon-tab-options-amber')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-amber">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-amber">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-amber">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-emerald">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-emerald-600" data-tab-toggle="icon-tab-profile-emerald" onclick="changeAtiveTab(event,'wrapper-for-icons-emerald','emerald','icon-tab-profile-emerald')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-emerald-600 bg-white" data-tab-toggle="icon-tab-settings-emerald" onclick="changeAtiveTab(event,'wrapper-for-icons-emerald','emerald','icon-tab-settings-emerald')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-emerald-600 bg-white" data-tab-toggle="icon-tab-options-emerald" onclick="changeAtiveTab(event,'wrapper-for-icons-emerald','emerald','icon-tab-options-emerald')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-emerald">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-emerald">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-emerald">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-teal">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-teal-600" data-tab-toggle="icon-tab-profile-teal" onclick="changeAtiveTab(event,'wrapper-for-icons-teal','teal','icon-tab-profile-teal')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-teal-600 bg-white" data-tab-toggle="icon-tab-settings-teal" onclick="changeAtiveTab(event,'wrapper-for-icons-teal','teal','icon-tab-settings-teal')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-teal-600 bg-white" data-tab-toggle="icon-tab-options-teal" onclick="changeAtiveTab(event,'wrapper-for-icons-teal','teal','icon-tab-options-teal')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-teal">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-teal">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-teal">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-lightBlue">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-lightBlue-600" data-tab-toggle="icon-tab-profile-lightBlue" onclick="changeAtiveTab(event,'wrapper-for-icons-lightBlue','lightBlue','icon-tab-profile-lightBlue')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-lightBlue-600 bg-white" data-tab-toggle="icon-tab-settings-lightBlue" onclick="changeAtiveTab(event,'wrapper-for-icons-lightBlue','lightBlue','icon-tab-settings-lightBlue')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-lightBlue-600 bg-white" data-tab-toggle="icon-tab-options-lightBlue" onclick="changeAtiveTab(event,'wrapper-for-icons-lightBlue','lightBlue','icon-tab-options-lightBlue')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-lightBlue">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-lightBlue">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-lightBlue">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-indigo">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-indigo-600" data-tab-toggle="icon-tab-profile-indigo" onclick="changeAtiveTab(event,'wrapper-for-icons-indigo','indigo','icon-tab-profile-indigo')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-indigo-600 bg-white" data-tab-toggle="icon-tab-settings-indigo" onclick="changeAtiveTab(event,'wrapper-for-icons-indigo','indigo','icon-tab-settings-indigo')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-indigo-600 bg-white" data-tab-toggle="icon-tab-options-indigo" onclick="changeAtiveTab(event,'wrapper-for-icons-indigo','indigo','icon-tab-options-indigo')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-indigo">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-indigo">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-indigo">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-purple">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-purple-600" data-tab-toggle="icon-tab-profile-purple" onclick="changeAtiveTab(event,'wrapper-for-icons-purple','purple','icon-tab-profile-purple')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-purple-600 bg-white" data-tab-toggle="icon-tab-settings-purple" onclick="changeAtiveTab(event,'wrapper-for-icons-purple','purple','icon-tab-settings-purple')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-purple-600 bg-white" data-tab-toggle="icon-tab-options-purple" onclick="changeAtiveTab(event,'wrapper-for-icons-purple','purple','icon-tab-options-purple')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-purple">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-purple">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-purple">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>

<div class="flex flex-wrap" id="wrapper-for-icons-pink">
  <div class="w-full">
    <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-pink-600" data-tab-toggle="icon-tab-profile-pink" onclick="changeAtiveTab(event,'wrapper-for-icons-pink','pink','icon-tab-profile-pink')">
          <i class="fas fa-space-shuttle text-base mr-1"></i>  Profile
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-pink-600 bg-white" data-tab-toggle="icon-tab-settings-pink" onclick="changeAtiveTab(event,'wrapper-for-icons-pink','pink','icon-tab-settings-pink')">
          <i class="fas fa-cog text-base mr-1"></i>  Settings
        </a>
      </li>
      <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
        <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-pink-600 bg-white" data-tab-toggle="icon-tab-options-pink" onclick="changeAtiveTab(event,'wrapper-for-icons-pink','pink','icon-tab-options-pink')">
          <i class="fas fa-briefcase text-base mr-1"></i>  Options
        </a>
      </li>
    </ul>
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
      <div class="px-4 py-5 flex-auto">
        <div class="tab-content tab-space">
          <div class="block" data-tab-content="true" id="icon-tab-profile-pink">
            <p>
              Collaboratively administrate empowered markets via
              plug-and-play networks. Dynamically procrastinate B2C users
              after installed base benefits.
              <br />
              <br />
              Dramatically visualize customer directed convergence
              without revolutionary ROI.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-settings-pink">
            <p>
              Completely synergize resource taxing relationships via
              premier niche markets. Professionally cultivate one-to-one
              customer service with robust ideas.
              <br />
              <br />
              Dynamically innovate resource-leveling customer service for
              state of the art customer service.
            </p>
          </div>
          <div class="hidden" data-tab-content="true" id="icon-tab-options-pink">
            <p>
              Efficiently unleash cross-media information without
              cross-media value. Quickly maximize timely deliverables for
              real-time schemas.
              <br />
              <br />
              Dramatically maintain clicks-and-mortar solutions
              without functional solutions.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function changeAtiveTab(event,wrapperID,color,tabID){
    let tabsWrapper = document.getElementById(wrapperID);
    let tabsAnchors = tabsWrapper.querySelectorAll("[data-tab-toggle]");
    let tabsContent = tabsWrapper.querySelectorAll("[data-tab-content]");

    for(let i = 0; i < tabsAnchors.length; i++) {
      if(tabsAnchors[i].getAttribute("data-tab-toggle") === tabID){
        tabsAnchors[i].classList.remove("text-" + color + "-600");
        tabsAnchors[i].classList.remove("bg-white");
        tabsAnchors[i].classList.add("text-white");
        tabsAnchors[i].classList.add("bg-" + color + "-600");
        tabsContent[i].classList.remove("hidden");
        tabsContent[i].classList.add("block");
      } else {
        tabsAnchors[i].classList.add("text-" + color + "-600");
        tabsAnchors[i].classList.add("bg-white");
        tabsAnchors[i].classList.remove("text-white");
        tabsAnchors[i].classList.remove("bg-" + color + "-600");
        tabsContent[i].classList.add("hidden");
        tabsContent[i].classList.remove("block");
      }
    }
  }
</script>