164 lines
8.9 KiB
HTML
164 lines
8.9 KiB
HTML
<div class="">
|
|
<section aria-labelledby="features-heading" class="mx-auto max-w-7xl py-12 lg:py-24 sm:px-2 lg:px-8">
|
|
<div class="mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0">
|
|
<div class="max-w-3xl">
|
|
<h2 id="features-heading">Multi Tabs</h2>
|
|
<p class="mt-4">Lorem ipsum dolor sit amet consectetur adipiscing elit. Ex sapien vitae pellentesque sem placerat in id. Pretium tellus duis convallis tempus leo eu aenean.</p>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="-mx-4 flex overflow-x-auto sm:mx-0">
|
|
<div class="flex-auto border-b border-gray-200 px-4 sm:px-0">
|
|
<div class="-mb-px flex space-x-2 lg:space-x-10" aria-orientation="horizontal" role="tablist">
|
|
<button id="features-tab-1" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-400 hover:text-gray-300" aria-controls="features-panel-1" role="tab" type="button">Tab1</button>
|
|
<button id="features-tab-2" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-400 hover:text-gray-300" aria-controls="features-panel-2" role="tab" type="button">Tab2</button>
|
|
<button id="features-tab-3" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-400 hover:text-gray-300" aria-controls="features-panel-3" role="tab" type="button">Tab3</button>
|
|
<button id="features-tab-4" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-400 hover:text-gray-300" aria-controls="features-panel-4" role="tab" type="button">Tab4</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="features-panel-1" class="space-y-6 pt-4" aria-labelledby="features-tab-1" role="tabpanel" tabindex="0">
|
|
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
|
<div class="mt-6 lg:col-span-7 lg:mt-0">
|
|
<h3 class="">Tab1</h3>
|
|
<p class="mt-2 ">Lorem ipsum dolor sit amet consectetur adipiscing elit. Ex sapien vitae pellentesque sem placerat in id. Pretium tellus
|
|
</p>
|
|
<dl class="mt-6 space-y-4">
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title1</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title2</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title3</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<div class="lg:col-span-5">
|
|
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
|
|
<img src="/technology/img/3node.png" alt="Maple organizer base with slots, supporting white polycarbonate trays of various sizes." class="object-cover object-center">
|
|
</div> #}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="features-panel-2" class="space-y-6 pt-4" aria-labelledby="features-tab-2" role="tabpanel" tabindex="0">
|
|
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
|
<div class="mt-6 lg:col-span-7 lg:mt-0">
|
|
<h3 class="">Tab2</h3>
|
|
<p class="mt-2 ">Lorem ipsum dolor sit amet consectetur adipiscing elit. Ex sapien vitae pellentesque sem placerat in id. Pretium tellus
|
|
</p>
|
|
<dl class="mt-6 space-y-4">
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title1</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title2</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title3</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<div class="lg:col-span-5">
|
|
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
|
|
<img src="/technology/img/zos.png" alt="" class="object-cover object-center">
|
|
</div> #}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="features-panel-3" class="space-y-6 pt-4" aria-labelledby="features-tab-3" role="tabpanel" tabindex="0">
|
|
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
|
<div class="mt-6 lg:col-span-7 lg:mt-0">
|
|
<h3 class="">Tab3</h3>
|
|
<p class="mt-2 ">Lorem ipsum dolor sit amet consectetur adipiscing elit. Ex sapien vitae pellentesque sem placerat in id. Pretium tellus
|
|
</p>
|
|
<dl class="mt-6 space-y-4">
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title1</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title2</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title3</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<div class="lg:col-span-5">
|
|
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
|
|
<img src="/technology/img/mycelium.png" alt="" class="object-cover object-center">
|
|
</div> #}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="features-panel-4" class="space-y-6 pt-4" aria-labelledby="features-tab-4" role="tabpanel" tabindex="0">
|
|
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
|
<div class="mt-6 lg:col-span-7 lg:mt-0">
|
|
<h3 class="">Tab4</h3>
|
|
<p class="mt-2 ">Lorem ipsum dolor sit amet consectetur adipiscing elit. Ex sapien vitae pellentesque sem placerat in id. Pretium tellus
|
|
</p>
|
|
<dl class="mt-6 space-y-4">
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title1</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title2</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg mb-0">• Title3</h5>
|
|
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<div class="lg:col-span-5">
|
|
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
|
|
<img src="/technology/img/fungistor.png" alt="Walnut organizer system on black leather desk mat on top of white desk." class="object-cover object-center">
|
|
</div> #}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const tabs = document.querySelectorAll('[role="tab"]');
|
|
const panels = document.querySelectorAll('[role="tabpanel"]');
|
|
|
|
tabs.forEach((tab, index) => {
|
|
tab.addEventListener('click', function () {
|
|
tabs.forEach(t => t.classList.remove('border-indigo-400', 'text-indigo-400'));
|
|
panels.forEach(panel => panel.style.display = 'none');
|
|
|
|
tab.classList.add('border-indigo-400', 'text-indigo-400');
|
|
const panelId = tab.getAttribute('aria-controls');
|
|
document.getElementById(panelId).style.display = 'block';
|
|
});
|
|
|
|
// Hide all panels except the first one on load
|
|
if (index === 0) {
|
|
tab.classList.add('border-indigo-400', 'text-indigo-400');
|
|
panels[index].style.display = 'block';
|
|
} else {
|
|
panels[index].style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|