ourworld_web/www_tf_demo
23
0
Fork 0
Code Pull Requests Activity

edi dark

Browse Source
This commit is contained in:
sasha-astiadi
2024-11-14 17:41:30 +01:00
parent 4df672ddd5
commit 8fead1a010
36 changed files with 348 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
templates/partials/slider.html Normal file
View File

@@ -0,0 +1,88 @@
<!--
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&#039;t wait to see how you&#039;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>