Navigation

<div class="bsk-pills-nav">
  <nav class="bsk-pills mb-4">
      <button class="bsk-pill-btn px-4 py-2" data-tab="about" aria-selected="true">About</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="aims" aria-selected="false">Aims</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="projects" aria-selected="false">Projects</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="news" aria-selected="false">News</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="contact" aria-selected="false">Contact</button>
  </nav>
  <div class="bsk-pill-contents">
      <div id="about" role="tabpanel" aria-labelledby="tab-about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="hidden" id="aims" role="tabpanel" aria-labelledby="tab-aims">
          <h2>Aims</h2>
          <p>Just make a decision and let it go. If there are two big trees, eventually there will be a little tree. You need the dark in order to show the light.</p>
          <p>A tree needs to be your friend if you're going to paint him. You want your tree to have some character. Make it special. This is a happy place, little squirrels live here and play. There's not a thing in the world wrong with washing your brush. In life you need colors.</p>
      </div>
      <div class="hidden" id="projects" role="tabpanel" aria-labelledby="tab-projects">
          <h2>Projects</h2>
          <p>Most of the time. I’m halfway content. Most of the time. I know exactly where it went. I don’t cheat on myself, I don’t run and hide.</p>
          <p>Hide from the feelings that are buried inside. I don’t compromise and I don’t pretend. I don’t even care if I ever see her again. Most of the time.</p>
      </div>
      <div class="hidden" id="news" role="tabpanel" aria-labelledby="tab-news">
          <h2>News</h2>
          <p>There is no shame in not knowing. The problem arises when irrational thought and attendant behavior fill the vacuum left by ignorance.</p>
          <p>What you know is not as important as how you think.</p>
          <p>Scientific literacy is an intellectual vaccine against the charlatans of the world that would exploit your ignorance.</p>
      </div>
      <div class="hidden" id="contact" role="tabpanel" aria-labelledby="tab-contact">
          <h2>Contact</h2>
          <p>That we can say what we think, write what we think, without hearing a sudden knock on the door. The document they produced was eventually signed but ultimately unfinished.</p>
          <p>We coach Little League in the Blue States and yes, we've got some gay friends in the Red States. Did I ever hear him make remarks that could be considered controversial while I sat in church? Yes.</p>
      </div>
  </div>
</div>

<div class="bsk-tabs-nav">
  <nav class="bsk-tabs flex">
      <button class="bsk-tab-btn px-4 py-2" data-tab="about" aria-selected="true">About</button>
      <button class="bsk-tab-btn px-4 py-2" data-tab="aims" aria-selected="false">Aims</button>
      <button class="bsk-tab-btn px-4 py-2" data-tab="projects" aria-selected="false">Projects</button>
      <button class="bsk-tab-btn px-4 py-2" data-tab="news" aria-selected="false">News</button>
      <button class="bsk-tab-btn px-4 py-2" data-tab="contact" aria-selected="false">Contact</button>
  </nav>
  <div class="bsk-tab-contents">
      <div id="about" role="tabpanel" aria-labelledby="tab-about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="hidden" id="aims" role="tabpanel" aria-labelledby="tab-aims">
          <h2>Aims</h2>
          <p>Just make a decision and let it go. If there are two big trees, eventually there will be a little tree. You need the dark in order to show the light.</p>
          <p>A tree needs to be your friend if you're going to paint him. You want your tree to have some character. Make it special. This is a happy place, little squirrels live here and play. There's not a thing in the world wrong with washing your brush. In life you need colors.</p>
      </div>
      <div class="hidden" id="projects" role="tabpanel" aria-labelledby="tab-projects">
          <h2>Projects</h2>
          <p>Most of the time. I’m halfway content. Most of the time. I know exactly where it went. I don’t cheat on myself, I don’t run and hide.</p>
          <p>Hide from the feelings that are buried inside. I don’t compromise and I don’t pretend. I don’t even care if I ever see her again. Most of the time.</p>
      </div>
      <div class="hidden" id="news" role="tabpanel" aria-labelledby="tab-news">
          <h2>News</h2>
          <p>There is no shame in not knowing. The problem arises when irrational thought and attendant behavior fill the vacuum left by ignorance.</p>
          <p>What you know is not as important as how you think.</p>
          <p>Scientific literacy is an intellectual vaccine against the charlatans of the world that would exploit your ignorance.</p>
      </div>
      <div class="hidden" id="contact" role="tabpanel" aria-labelledby="tab-contact">
          <h2>Contact</h2>
          <p>That we can say what we think, write what we think, without hearing a sudden knock on the door. The document they produced was eventually signed but ultimately unfinished.</p>
          <p>We coach Little League in the Blue States and yes, we've got some gay friends in the Red States. Did I ever hear him make remarks that could be considered controversial while I sat in church? Yes.</p>
      </div>
  </div>
</div>

<!-- Pills with a drop-down menu -->
<div class="bsk-pills-nav">
  <nav class="bsk-pills flex mb-4" id="tabs">
      <button class="bsk-pill-btn px-4 py-2" data-tab="about" aria-selected="true">About</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="aims" aria-selected="false">Aims</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="projects" aria-selected="false">Projects</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="news" aria-selected="false">News</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="contact" aria-selected="false">Contact</button>
      <div data-dropdown-wrapper class="bsk-dropdown-pill relative">
          <button data-dropdown-toggle class="bsk-pill-btn flex">
              Dropdown
              <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
          </button>
          <div data-dropdown-menu class="hidden absolute w-full z-50 py-1 px-2 shadow-lg">
              <div class="py-1" role="menu">
                  <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 1</a>
                  <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
              </div>
          </div>
      </div>
  </nav>
  <div class="bsk-pill-contents">
      <div id="about" role="tabpanel" aria-labelledby="tab-about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="hidden" id="aims" role="tabpanel" aria-labelledby="tab-aims">
          <h2>Aims</h2>
          <p>Just make a decision and let it go. If there are two big trees, eventually there will be a little tree. You need the dark in order to show the light.</p>
          <p>A tree needs to be your friend if you're going to paint him. You want your tree to have some character. Make it special. This is a happy place, little squirrels live here and play. There's not a thing in the world wrong with washing your brush. In life you need colors.</p>
      </div>
      <div class="hidden" id="projects" role="tabpanel" aria-labelledby="tab-projects">
          <h2>Projects</h2>
          <p>Most of the time. I’m halfway content. Most of the time. I know exactly where it went. I don’t cheat on myself, I don’t run and hide.</p>
          <p>Hide from the feelings that are buried inside. I don’t compromise and I don’t pretend. I don’t even care if I ever see her again. Most of the time.</p>
      </div>
      <div class="hidden" id="news" role="tabpanel" aria-labelledby="tab-news">
          <h2>News</h2>
          <p>There is no shame in not knowing. The problem arises when irrational thought and attendant behavior fill the vacuum left by ignorance.</p>
          <p>What you know is not as important as how you think.</p>
          <p>Scientific literacy is an intellectual vaccine against the charlatans of the world that would exploit your ignorance.</p>
      </div>
      <div class="hidden" id="contact" role="tabpanel" aria-labelledby="tab-contact">
          <h2>Contact</h2>
          <p>That we can say what we think, write what we think, without hearing a sudden knock on the door. The document they produced was eventually signed but ultimately unfinished.</p>
          <p>We coach Little League in the Blue States and yes, we've got some gay friends in the Red States. Did I ever hear him make remarks that could be considered controversial while I sat in church? Yes.</p>
      </div>
  </div>
</div>
<br>
<!-- Tabs with a drop-down menu -->
<div class="bsk-tabs-nav">
  <nav class="bsk-tabs flex" id="tabs">
      <button class="bsk-tab-btn px-4 py-2" data-tab="about" aria-selected="true">About</button>
      <button class="bsk-tab-btn px-4 py-2" data-tab="aims" aria-selected="false">Aims</button>
      <button class="bsk-tab-btn px-4 py-2" data-tab="projects" aria-selected="false">Projects</button>
      <button class="bsk-tab-btn px-4 py-2" data-tab="news" aria-selected="false">News</button>
      <button class="bsk-tab-btn px-4 py-2" data-tab="contact" aria-selected="false">Contact</button>
      <div data-dropdown-wrapper class="bsk-dropdown-tab relative">
          <button data-dropdown-toggle class="bsk-tab-btn flex">
              Dropdown
              <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
          </button>
          <div data-dropdown-menu class="hidden absolute w-full z-50 py-1 px-2 shadow-lg border-t-4 -translate-y-1">
              <div class="py-1" role="menu">
                  <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 1</a>
                  <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
              </div>
          </div>
      </div>
  </nav>
  <div class="bsk-tab-contents">
      <div id="about" role="tabpanel" aria-labelledby="tab-about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="hidden" id="aims" role="tabpanel" aria-labelledby="tab-aims">
          <h2>Aims</h2>
          <p>Just make a decision and let it go. If there are two big trees, eventually there will be a little tree. You need the dark in order to show the light.</p>
          <p>A tree needs to be your friend if you're going to paint him. You want your tree to have some character. Make it special. This is a happy place, little squirrels live here and play. There's not a thing in the world wrong with washing your brush. In life you need colors.</p>
      </div>
      <div class="hidden" id="projects" role="tabpanel" aria-labelledby="tab-projects">
          <h2>Projects</h2>
          <p>Most of the time. I’m halfway content. Most of the time. I know exactly where it went. I don’t cheat on myself, I don’t run and hide.</p>
          <p>Hide from the feelings that are buried inside. I don’t compromise and I don’t pretend. I don’t even care if I ever see her again. Most of the time.</p>
      </div>
      <div class="hidden" id="news" role="tabpanel" aria-labelledby="tab-news">
          <h2>News</h2>
          <p>There is no shame in not knowing. The problem arises when irrational thought and attendant behavior fill the vacuum left by ignorance.</p>
          <p>What you know is not as important as how you think.</p>
          <p>Scientific literacy is an intellectual vaccine against the charlatans of the world that would exploit your ignorance.</p>
      </div>
      <div class="hidden" id="contact" role="tabpanel" aria-labelledby="tab-contact">
          <h2>Contact</h2>
          <p>That we can say what we think, write what we think, without hearing a sudden knock on the door. The document they produced was eventually signed but ultimately unfinished.</p>
          <p>We coach Little League in the Blue States and yes, we've got some gay friends in the Red States. Did I ever hear him make remarks that could be considered controversial while I sat in church? Yes.</p>
      </div>
  </div>
</div>

<div class="bsk-pills-nav">
  <nav class="bsk-pills mb-4">
      <button class="bsk-pill-btn px-4 py-2" data-tab="about" aria-selected="false">About</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="aims" aria-selected="true">Aims</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="projects" aria-selected="false">Projects</button>
  </nav>
  <div class="bsk-pill-contents">
      <div class="hidden" id="about" role="tabpanel" aria-labelledby="tab-about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div id="aims" role="tabpanel" aria-labelledby="tab-aims">
          <h2>Aims</h2>
          <p>Just make a decision and let it go. If there are two big trees, eventually there will be a little tree. You need the dark in order to show the light.</p>
          <p>A tree needs to be your friend if you're going to paint him. You want your tree to have some character. Make it special. This is a happy place, little squirrels live here and play. There's not a thing in the world wrong with washing your brush. In life you need colors.</p>
      </div>
      <div class="hidden" id="projects" role="tabpanel" aria-labelledby="tab-projects">
          <h2>Projects</h2>
          <p>Most of the time. I’m halfway content. Most of the time. I know exactly where it went. I don’t cheat on myself, I don’t run and hide.</p>
          <p>Hide from the feelings that are buried inside. I don’t compromise and I don’t pretend. I don’t even care if I ever see her again. Most of the time.</p>
      </div>
  </div>
</div>

<div class="bsk-pills-nav">
  <nav class="bsk-pills mb-4">
      <button class="bsk-pill-btn px-4 py-2" data-tab="about" aria-selected="true">About</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="aims" aria-selected="false" disabled>Aims</button>
      <button class="bsk-pill-btn px-4 py-2" data-tab="projects" aria-selected="false">Projects</button>
  </nav>
  <div class="bsk-pill-contents">
      <div id="about" role="tabpanel" aria-labelledby="tab-about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="hidden" id="aims" role="tabpanel" aria-labelledby="tab-aims">
          <h2>Aims</h2>
          <p>Just make a decision and let it go. If there are two big trees, eventually there will be a little tree. You need the dark in order to show the light.</p>
          <p>A tree needs to be your friend if you're going to paint him. You want your tree to have some character. Make it special. This is a happy place, little squirrels live here and play. There's not a thing in the world wrong with washing your brush. In life you need colors.</p>
      </div>
      <div class="hidden" id="projects" role="tabpanel" aria-labelledby="tab-projects">
          <h2>Projects</h2>
          <p>Most of the time. I’m halfway content. Most of the time. I know exactly where it went. I don’t cheat on myself, I don’t run and hide.</p>
          <p>Hide from the feelings that are buried inside. I don’t compromise and I don’t pretend. I don’t even care if I ever see her again. Most of the time.</p>
      </div>
  </div>
</div>

<div class="bsk-pills-nav">
  <nav class="bsk-pills flex justify-between mb-4">
      <button class="bsk-pill-btn flex-1 text-center px-4 py-2" data-tab="about" aria-selected="true">About</button>
      <button class="bsk-pill-btn flex-1 text-center px-4 py-2" data-tab="aims" aria-selected="false">Aims</button>
      <button class="bsk-pill-btn flex-1 text-center px-4 py-2" data-tab="projects" aria-selected="false">Projects</button>
      <button class="bsk-pill-btn flex-1 text-center px-4 py-2" data-tab="news" aria-selected="false">News</button>
      <button class="bsk-pill-btn flex-1 text-center px-4 py-2" data-tab="contact" aria-selected="false">Contact</button>
  </nav>
  <div class="bsk-pill-contents">
      <div id="about" role="tabpanel" aria-labelledby="tab-about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="hidden" id="aims" role="tabpanel" aria-labelledby="tab-aims">
          <h2>Aims</h2>
          <p>Just make a decision and let it go. If there are two big trees, eventually there will be a little tree. You need the dark in order to show the light.</p>
          <p>A tree needs to be your friend if you're going to paint him. You want your tree to have some character. Make it special. This is a happy place, little squirrels live here and play. There's not a thing in the world wrong with washing your brush. In life you need colors.</p>
      </div>
      <div class="hidden" id="projects" role="tabpanel" aria-labelledby="tab-projects">
          <h2>Projects</h2>
          <p>Most of the time. I’m halfway content. Most of the time. I know exactly where it went. I don’t cheat on myself, I don’t run and hide.</p>
          <p>Hide from the feelings that are buried inside. I don’t compromise and I don’t pretend. I don’t even care if I ever see her again. Most of the time.</p>
      </div>
      <div class="hidden" id="news" role="tabpanel" aria-labelledby="tab-news">
          <h2>News</h2>
          <p>There is no shame in not knowing. The problem arises when irrational thought and attendant behavior fill the vacuum left by ignorance.</p>
          <p>What you know is not as important as how you think.</p>
          <p>Scientific literacy is an intellectual vaccine against the charlatans of the world that would exploit your ignorance.</p>
      </div>
      <div class="hidden" id="contact" role="tabpanel" aria-labelledby="tab-contact">
          <h2>Contact</h2>
          <p>That we can say what we think, write what we think, without hearing a sudden knock on the door. The document they produced was eventually signed but ultimately unfinished.</p>
          <p>We coach Little League in the Blue States and yes, we've got some gay friends in the Red States. Did I ever hear him make remarks that could be considered controversial while I sat in church? Yes.</p>
      </div>
  </div>
</div>

<br>

<div class="bsk-tabs-nav">
  <nav class="bsk-tabs flex justify-between" id="tabs">
      <button class="bsk-tab-btn flex-1 text-center px-4 py-2" data-tab="about" aria-selected="true">About</button>
      <button class="bsk-tab-btn flex-1 text-center px-4 py-2" data-tab="aims" aria-selected="false">Aims</button>
      <button class="bsk-tab-btn flex-1 text-center px-4 py-2" data-tab="projects" aria-selected="false">Projects</button>
      <button class="bsk-tab-btn flex-1 text-center px-4 py-2" data-tab="news" aria-selected="false">News</button>
      <button class="bsk-tab-btn flex-1 text-center px-4 py-2" data-tab="contact" aria-selected="false">Contact</button>
  </nav>
  <div class="bsk-tab-contents">
      <div id="about" role="tabpanel" aria-labelledby="tab-about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="hidden" id="aims" role="tabpanel" aria-labelledby="tab-aims">
          <h2>Aims</h2>
          <p>Just make a decision and let it go. If there are two big trees, eventually there will be a little tree. You need the dark in order to show the light.</p>
          <p>A tree needs to be your friend if you're going to paint him. You want your tree to have some character. Make it special. This is a happy place, little squirrels live here and play. There's not a thing in the world wrong with washing your brush. In life you need colors.</p>
      </div>
      <div class="hidden" id="projects" role="tabpanel" aria-labelledby="tab-projects">
          <h2>Projects</h2>
          <p>Most of the time. I’m halfway content. Most of the time. I know exactly where it went. I don’t cheat on myself, I don’t run and hide.</p>
          <p>Hide from the feelings that are buried inside. I don’t compromise and I don’t pretend. I don’t even care if I ever see her again. Most of the time.</p>
      </div>
      <div class="hidden" id="news" role="tabpanel" aria-labelledby="tab-news">
          <h2>News</h2>
          <p>There is no shame in not knowing. The problem arises when irrational thought and attendant behavior fill the vacuum left by ignorance.</p>
          <p>What you know is not as important as how you think.</p>
          <p>Scientific literacy is an intellectual vaccine against the charlatans of the world that would exploit your ignorance.</p>
      </div>
      <div class="hidden" id="contact" role="tabpanel" aria-labelledby="tab-contact">
          <h2>Contact</h2>
          <p>That we can say what we think, write what we think, without hearing a sudden knock on the door. The document they produced was eventually signed but ultimately unfinished.</p>
          <p>We coach Little League in the Blue States and yes, we've got some gay friends in the Red States. Did I ever hear him make remarks that could be considered controversial while I sat in church? Yes.</p>
      </div>
  </div>
</div>