88 lines
5.1 KiB
HTML
88 lines
5.1 KiB
HTML
<!--
|
||
This example requires some changes to your config:
|
||
|
||
```
|
||
// tailwind.config.js
|
||
module.exports = {
|
||
// ...
|
||
plugins: [
|
||
// ...
|
||
require('@tailwindcss/aspect-ratio'),
|
||
],
|
||
}
|
||
```
|
||
-->
|
||
<div class="bg-white">
|
||
<section aria-labelledby="features-heading" class="mx-auto max-w-7xl py-32 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" class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Collaboration, Innovation, Evolution</h2>
|
||
<p class="mt-4 font-light text-gray-700">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects.</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-10" aria-orientation="horizontal" role="tablist">
|
||
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||
<button id="features-tab-2" class="whitespace-nowrap border-b-2 border-transparent bg-transparent py-6 text-lg font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="features-panel-2" role="tab" type="button">Material</button>
|
||
<button id="features-tab-3" class="whitespace-nowrap border-b-2 border-transparent py-6 bg-transparent text-lg font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="features-panel-3" role="tab" type="button">Considerations</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="features-panel-2" class="space-y-16 pt-10 lg:pt-16" 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-5 lg:mt-0">
|
||
<h3 class="text-lg font-medium text-gray-900">Natural wood options</h3>
|
||
<p class="mt-2 text-sm text-gray-500">Organize has options for rich walnut and bright maple base materials. Accent your desk with a contrasting material, or match similar woods for a calm and cohesive look. Every base is hand sanded and finished.</p>
|
||
</div>
|
||
<div class="lg:col-span-7">
|
||
<div class="aspect-h-1 aspect-w-2 overflow-hidden rounded-lg bg-gray-100 sm:aspect-h-2 sm:aspect-w-5">
|
||
<img src="https://tailwindui.com/plus/img/ecommerce-images/product-feature-06-detail-02.jpg" alt="Walnut organizer base with pen, sticky note, phone, and bin trays, next to modular drink coaster attachment." class="object-cover object-center">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="features-panel-3" class="space-y-16 pt-10 lg:pt-16" 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-5 lg:mt-0">
|
||
<h3 class="text-lg font-medium text-gray-900">Helpful around the home</h3>
|
||
<p class="mt-2 text-sm text-gray-500">Our customers use Organize throughout the house to bring efficiency to many daily routines. Enjoy Organize in your workspace, kitchen, living room, entry way, garage, and more. We can't wait to see how you'll use it!</p>
|
||
</div>
|
||
<div class="lg:col-span-7">
|
||
<div class="aspect-h-1 aspect-w-2 overflow-hidden rounded-lg bg-gray-100 sm:aspect-h-2 sm:aspect-w-5">
|
||
<img src="https://tailwindui.com/plus/img/ecommerce-images/product-feature-06-detail-03.jpg" alt="Walnut organizer base with white polycarbonate trays in the kitchen with various kitchen utensils." class="object-cover object-center">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const tabs = document.querySelectorAll('[role="tab"]');
|
||
const tabPanels = document.querySelectorAll('[role="tabpanel"]');
|
||
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener("click", () => {
|
||
// Remove active classes from all tabs and panels
|
||
tabs.forEach(t => {
|
||
t.classList.remove("border-indigo-500", "text-indigo-600");
|
||
t.classList.add("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700");
|
||
});
|
||
tabPanels.forEach(panel => panel.classList.add("hidden"));
|
||
|
||
// Add active classes to clicked tab and associated panel
|
||
tab.classList.add("border-indigo-500", "text-indigo-600");
|
||
tab.classList.remove("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700");
|
||
|
||
const panelId = tab.getAttribute("aria-controls");
|
||
document.getElementById(panelId).classList.remove("hidden");
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|