Notus Svelte Tabs

Dynamic navigation component with menu items and content. The dynamic part of them is made using Svelte and the styles are done using Tailwind CSS.

Text

Profile
Settings
Options

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI.

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

<script>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-blueGray-600':'text-blueGray-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-blueGray-600':'text-blueGray-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-blueGray-600':'text-blueGray-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-red-600':'text-red-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-red-600':'text-red-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-red-600':'text-red-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-orange-600':'text-orange-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-orange-600':'text-orange-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-orange-600':'text-orange-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-amber-600':'text-amber-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-amber-600':'text-amber-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-amber-600':'text-amber-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-emerald-600':'text-emerald-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-emerald-600':'text-emerald-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-emerald-600':'text-emerald-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-teal-600':'text-teal-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-teal-600':'text-teal-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-teal-600':'text-teal-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-lightBlue-600':'text-lightBlue-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-lightBlue-600':'text-lightBlue-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-lightBlue-600':'text-lightBlue-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-indigo-600':'text-indigo-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-indigo-600':'text-indigo-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-indigo-600':'text-indigo-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-purple-600':'text-purple-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-purple-600':'text-purple-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-purple-600':'text-purple-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-pink-600':'text-pink-600 bg-white'}" on:click={() => toggleTabs(1)}>
          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 {openTab === 2 ? 'text-white bg-pink-600':'text-pink-600 bg-white'}" on:click={() => toggleTabs(2)}>
          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 {openTab === 3 ? 'text-white bg-pink-600':'text-pink-600 bg-white'}" on:click={() => toggleTabs(3)}>
          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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

Profile
Settings
Options

<script>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-blueGray-600':'text-blueGray-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-blueGray-600':'text-blueGray-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-blueGray-600':'text-blueGray-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-red-600':'text-red-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-red-600':'text-red-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-red-600':'text-red-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-orange-600':'text-orange-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-orange-600':'text-orange-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-orange-600':'text-orange-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-amber-600':'text-amber-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-amber-600':'text-amber-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-amber-600':'text-amber-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-emerald-600':'text-emerald-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-emerald-600':'text-emerald-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-emerald-600':'text-emerald-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-teal-600':'text-teal-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-teal-600':'text-teal-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-teal-600':'text-teal-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-lightBlue-600':'text-lightBlue-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-lightBlue-600':'text-lightBlue-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-lightBlue-600':'text-lightBlue-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-indigo-600':'text-indigo-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-indigo-600':'text-indigo-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-indigo-600':'text-indigo-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-purple-600':'text-purple-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-purple-600':'text-purple-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-purple-600':'text-purple-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>

let openTab = 1;

function toggleTabs(tabNumber){
  openTab = tabNumber
}

</script>

<div class="flex flex-wrap">
  <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 {openTab === 1 ? 'text-white bg-pink-600':'text-pink-600 bg-white'}" on:click={() => toggleTabs(1)}>
          <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 {openTab === 2 ? 'text-white bg-pink-600':'text-pink-600 bg-white'}" on:click={() => toggleTabs(2)}>
          <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 {openTab === 3 ? 'text-white bg-pink-600':'text-pink-600 bg-white'}" on:click={() => toggleTabs(3)}>
          <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="{openTab === 1 ? 'block':'hidden'}">
            <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="{openTab === 2 ? 'block':'hidden'}">
            <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="{openTab === 3 ? 'block':'hidden'}">
            <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>