mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-18 18:27:01 +00:00
added 4 accordion
This commit is contained in:
merajjahir
2404
dist/tailshape.css
vendored
2404
dist/tailshape.css
vendored
File diff suppressed because it is too large
Load Diff
143
public/componets/accordion/1_accordion.html
Normal file
143
public/componets/accordion/1_accordion.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Accordion</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- accordion 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>
|
||||
Accordion 1
|
||||
</div>
|
||||
</section>
|
||||
<div class="h-screen dark:bg-gray-800 bg-gray-100 flex items-start lg:items-center justify-center">
|
||||
|
||||
<div class="container mx-auto px-4 h-full">
|
||||
<h2 class="text-gray-800 font-semibold tracking-tight leading-loose text-center text-3xl lg:text-5xl my-2 lg:my-8">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
|
||||
<section x-data="{ selectedItem: 1 }" class="shadow-md bg-gray-200 overflow-hidden rounded-lg mt-6 sm:shadow-lg lg:mt-16 lg:mx-auto lg:max-w-4xl">
|
||||
<article class="border-gray-400 border-b hover:bg-gray-300">
|
||||
<div>
|
||||
<header @click="selectedItem === 1 ? selectedItem = 0 : selectedItem = 1" x-bind:class="{ 'bg-gray-300': selectedItem === 1 }" class="flex justify-between items-center p-5 pl-8 pr-8 cursor-pointer select-none">
|
||||
<h3 class="font-semibold text-xl text-gray-800">
|
||||
Do you offer team pricing?
|
||||
</h3>
|
||||
<div class="rounded-full border w-7 h-7 flex items-center justify-center hover:bg-gray-200">
|
||||
<div x-show="selectedItem !== 1" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div x-show="selectedItem === 1" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div x-show="selectedItem === 1">
|
||||
<div class="pl-8 pr-8 py-5 bg-gray-100 text-gray-700">
|
||||
<p>
|
||||
Yes, we do! Team pricing is available for any plan. You can take advantage of 30% off for signing up for team pricing of 10 users or more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="border-gray-400 border-b hover:bg-gray-300">
|
||||
<div>
|
||||
<header @click="selectedItem === 2 ? selectedItem = 0 : selectedItem = 2" x-bind:class="{ 'bg-gray-300': selectedItem === 2 }" class="flex justify-between items-center p-5 pl-8 pr-8 cursor-pointer select-none">
|
||||
<h3 class="font-semibold text-xl text-gray-800">
|
||||
How do I add a custom domain?
|
||||
</h3>
|
||||
<div class="rounded-full border w-7 h-7 flex items-center justify-center hover:bg-gray-200">
|
||||
<div x-show="selectedItem !== 2" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div x-show="selectedItem === 2" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div x-show="selectedItem === 2">
|
||||
<div class="pl-8 pr-8 py-5 bg-gray-100 text-gray-700">
|
||||
<p>
|
||||
You can easily change your site settings inside of your site dashboard by clicking the top right menu and clicking the settings button.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="border-gray-400 border-b hover:bg-gray-300">
|
||||
<div>
|
||||
<header @click="selectedItem === 3 ? selectedItem = 0 : selectedItem = 3" x-bind:class="{ 'bg-gray-300': selectedItem === 3 }" class="flex justify-between items-center p-5 pl-8 pr-8 cursor-pointer select-none">
|
||||
<h3 class="font-semibold text-xl text-gray-800">
|
||||
How does it work?
|
||||
</h3>
|
||||
<div class="rounded-full border w-7 h-7 flex items-center justify-center hover:bg-gray-200">
|
||||
<div x-show="selectedItem !== 3" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div x-show="selectedItem === 3" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div x-show="selectedItem === 3">
|
||||
<div class="pl-8 pr-8 py-5 bg-gray-100 text-gray-700">
|
||||
<p>
|
||||
Our platform works with your content to provides insights and metrics on how you can grow your business and scale your infastructure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- accordion 1 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
public/componets/accordion/2_accordion.html
Normal file
98
public/componets/accordion/2_accordion.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Accordion</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- accordion 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>
|
||||
Accordion 2
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="flex items-center justify-center py-20 transition-height duration-300 from-purple-100 via-red-300 to-indigo-500 bg-gradient-to-br">
|
||||
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg shadow-xl'>
|
||||
<h1 class="text-xl mb-10 text-center">TAILWINDCSS ACCORDION WITH <code><details> <summary></code> HTML Tag</h1>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 after:content-['+'] ">Morbi at sagittis velit</summary>
|
||||
<p class="px-4 py-3">
|
||||
Nunc posuere dapibus urna quis cursus. Mauris malesuada tincidunt diam vel placerat mi tincidunt ac. Nullam augue urna, venenatis ut blandit eget, auctor vel eros. In ut dolor ante
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">Etiam ut lacus in enim sagittis posuere at a elit</summary>
|
||||
<p class="px-4 py-3 transition-all duration-700">
|
||||
Fusce sed laoreet ex. Aenean justo nisl, eleifend eget eleifend sit amet, imperdiet id libero. Suspendisse et tempus leo, et lacinia arcu. Etiam at ante in est efficitur fringilla eleifend nec tellus. Integer sed auctor lectus, nec ullamcorper arcu. Nullam nec eros elit. Nulla tempor massa ut quam elementum dignissim. Sed eu pulvinar est, vel vehicula dolor. Pellentesque in ante vel elit facilisis consectetur eu id felis
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">
|
||||
Nam auctor fringilla magna id porta
|
||||
</summary>
|
||||
<p class="px-4 py-3 transition-all duration-700">
|
||||
Etiam maximus vitae eros eu vestibulum. Donec posuere, magna non tincidunt dignissim, magna tortor mollis augue, at maximus ante lacus vel tellus. Vestibulum vestibulum consectetur tortor id sagittis. Suspendisse nisi ipsum, pretium a lorem at, laoreet condimentum arcu
|
||||
</p>
|
||||
</details>
|
||||
|
||||
|
||||
<!-- THE CSS -->
|
||||
<style>
|
||||
|
||||
details[open] summary::after {
|
||||
content: "-";
|
||||
transition: all;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- accordion 2 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
114
public/componets/accordion/3_accordion.html
Normal file
114
public/componets/accordion/3_accordion.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Accordion</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- accordion 3 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>
|
||||
Accordion 3
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-cyan-200 items-center transition duration-200 ">
|
||||
|
||||
<div class="mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800 max-w-lg">
|
||||
<ul class="w-full transition ">
|
||||
<li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
|
||||
|
||||
<button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
|
||||
What is term?
|
||||
<span class="">
|
||||
<svg class="h-6 fill-current text-gray-500 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
<div class="px-2 bg-gray-50 h-0 overflow-hidden group-hover:h-full transition-height">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque rem quod hic, magnam quis vero nobis cumque esse cum fugit maxime blanditiis quae maiores sint nisi? Vitae dolorem tempora nobis?</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class=" max-w-lg mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800">
|
||||
<ul class="w-full transition ">
|
||||
<li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
|
||||
|
||||
<button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
|
||||
What is term?
|
||||
<span class="">
|
||||
<svg class="h-6 fill-current text-gray-500 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
<div class="px-2 bg-gray-50 h-0 overflow-hidden group-hover:h-full transition-height">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque rem quod hic, magnam quis vero nobis cumque esse cum fugit maxime blanditiis quae maiores sint nisi? Vitae dolorem tempora nobis?</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="max-w-lg mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800">
|
||||
<ul class="w-full transition ">
|
||||
<li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
|
||||
|
||||
<button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
|
||||
What is term?
|
||||
<span class="">
|
||||
<svg class="h-6 fill-current text-gray-500 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
<div class="px-2 bg-gray-50 h-0 overflow-hidden group-hover:h-full transition-height">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque rem quod hic, magnam quis vero nobis cumque esse cum fugit maxime blanditiis quae maiores sint nisi? Vitae dolorem tempora nobis?</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- accordion 3 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
146
public/componets/accordion/4_accordion.html
Normal file
146
public/componets/accordion/4_accordion.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Accordion</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- accordion 4 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>
|
||||
Accordion 4
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
|
||||
<div class="h-screen bg-gradient-to-br from-pink-50 to-indigo-100 grid place-items-center">
|
||||
<div class="w-6/12 mx-auto rounded border">
|
||||
<div class="bg-white p-10 shadow-sm">
|
||||
<h3 class="text-lg font-medium text-gray-800">Several Windows stacked on each other</h3>
|
||||
<p class="text-sm font-light text-gray-600 my-3">
|
||||
The accordion is a graphical control element comprising a vertically stacked list of items such as labels or thumbnails
|
||||
</p>
|
||||
|
||||
<div class="h-1 w-full mx-auto border-b my-5"></div>
|
||||
|
||||
<!-- What is term -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg ">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>What is term?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put
|
||||
far daughter.
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- When to use Accordion Components -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>When to use Accordion Components?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put
|
||||
far daughter.
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>How can it be defined?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put
|
||||
far daughter.
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>Chamber reached do he nothing be?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put
|
||||
far daughter.
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.accordion-content {
|
||||
transition: max-height 0.3s ease-out, padding 0.3s ease;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const accordionHeader = document.querySelectorAll(".accordion-header");
|
||||
accordionHeader.forEach((header) => {
|
||||
header.addEventListener("click", () => {
|
||||
const accordionContent = header.parentElement.querySelector(".accordion-content");
|
||||
let accordionMaxHeight = accordionContent.style.maxHeight;
|
||||
|
||||
// Condition handling
|
||||
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
|
||||
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
|
||||
header.querySelector(".fas").classList.remove("fa-plus");
|
||||
header.querySelector(".fas").classList.add("fa-minus");
|
||||
header.parentElement.classList.add("bg-indigo-50");
|
||||
} else {
|
||||
accordionContent.style.maxHeight = `0px`;
|
||||
header.querySelector(".fas").classList.add("fa-plus");
|
||||
header.querySelector(".fas").classList.remove("fa-minus");
|
||||
header.parentElement.classList.remove("bg-indigo-50");
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<!-- accordion 4 end -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
386
public/componets/accordion/accordion.html
Normal file
386
public/componets/accordion/accordion.html
Normal file
@@ -0,0 +1,386 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Accordion</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- accordion 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>
|
||||
Accordion 1
|
||||
</div>
|
||||
</section>
|
||||
<div class="h-screen dark:bg-gray-800 bg-gray-100 flex items-start lg:items-center justify-center">
|
||||
|
||||
<div class="container mx-auto px-4 h-full">
|
||||
<h2 class="text-gray-800 font-semibold tracking-tight leading-loose text-center text-3xl lg:text-5xl my-2 lg:my-8">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
|
||||
<section x-data="{ selectedItem: 1 }" class="shadow-md bg-gray-200 overflow-hidden rounded-lg mt-6 sm:shadow-lg lg:mt-16 lg:mx-auto lg:max-w-4xl">
|
||||
<article class="border-gray-400 border-b hover:bg-gray-300">
|
||||
<div>
|
||||
<header @click="selectedItem === 1 ? selectedItem = 0 : selectedItem = 1" x-bind:class="{ 'bg-gray-300': selectedItem === 1 }" class="flex justify-between items-center p-5 pl-8 pr-8 cursor-pointer select-none">
|
||||
<h3 class="font-semibold text-xl text-gray-800">
|
||||
Do you offer team pricing?
|
||||
</h3>
|
||||
<div class="rounded-full border w-7 h-7 flex items-center justify-center hover:bg-gray-200">
|
||||
<div x-show="selectedItem !== 1" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div x-show="selectedItem === 1" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div x-show="selectedItem === 1">
|
||||
<div class="pl-8 pr-8 py-5 bg-gray-100 text-gray-700">
|
||||
<p>
|
||||
Yes, we do! Team pricing is available for any plan. You can take advantage of 30% off for signing up for team pricing of 10 users or more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="border-gray-400 border-b hover:bg-gray-300">
|
||||
<div>
|
||||
<header @click="selectedItem === 2 ? selectedItem = 0 : selectedItem = 2" x-bind:class="{ 'bg-gray-300': selectedItem === 2 }" class="flex justify-between items-center p-5 pl-8 pr-8 cursor-pointer select-none">
|
||||
<h3 class="font-semibold text-xl text-gray-800">
|
||||
How do I add a custom domain?
|
||||
</h3>
|
||||
<div class="rounded-full border w-7 h-7 flex items-center justify-center hover:bg-gray-200">
|
||||
<div x-show="selectedItem !== 2" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div x-show="selectedItem === 2" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div x-show="selectedItem === 2">
|
||||
<div class="pl-8 pr-8 py-5 bg-gray-100 text-gray-700">
|
||||
<p>
|
||||
You can easily change your site settings inside of your site dashboard by clicking the top right menu and clicking the settings button.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="border-gray-400 border-b hover:bg-gray-300">
|
||||
<div>
|
||||
<header @click="selectedItem === 3 ? selectedItem = 0 : selectedItem = 3" x-bind:class="{ 'bg-gray-300': selectedItem === 3 }" class="flex justify-between items-center p-5 pl-8 pr-8 cursor-pointer select-none">
|
||||
<h3 class="font-semibold text-xl text-gray-800">
|
||||
How does it work?
|
||||
</h3>
|
||||
<div class="rounded-full border w-7 h-7 flex items-center justify-center hover:bg-gray-200">
|
||||
<div x-show="selectedItem !== 3" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div x-show="selectedItem === 3" class="rounded-full text-gray-500 w-7 h-7 flex items-center justify-center">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div x-show="selectedItem === 3">
|
||||
<div class="pl-8 pr-8 py-5 bg-gray-100 text-gray-700">
|
||||
<p>
|
||||
Our platform works with your content to provides insights and metrics on how you can grow your business and scale your infastructure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- accordion 1 end -->
|
||||
|
||||
|
||||
<!-- accordion 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>
|
||||
Accordion 2
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="flex items-center justify-center py-20 transition-height duration-300 from-purple-100 via-red-300 to-indigo-500 bg-gradient-to-br">
|
||||
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg shadow-xl'>
|
||||
<h1 class="text-xl mb-10 text-center">TAILWINDCSS ACCORDION WITH <code><details> <summary></code> HTML Tag</h1>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 after:content-['+'] ">Morbi at sagittis velit</summary>
|
||||
<p class="px-4 py-3">
|
||||
Nunc posuere dapibus urna quis cursus. Mauris malesuada tincidunt diam vel placerat mi tincidunt ac. Nullam augue urna, venenatis ut blandit eget, auctor vel eros. In ut dolor ante
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">Etiam ut lacus in enim sagittis posuere at a elit</summary>
|
||||
<p class="px-4 py-3 transition-all duration-700">
|
||||
Fusce sed laoreet ex. Aenean justo nisl, eleifend eget eleifend sit amet, imperdiet id libero. Suspendisse et tempus leo, et lacinia arcu. Etiam at ante in est efficitur fringilla eleifend nec tellus. Integer sed auctor lectus, nec ullamcorper arcu. Nullam nec eros elit. Nulla tempor massa ut quam elementum dignissim. Sed eu pulvinar est, vel vehicula dolor. Pellentesque in ante vel elit facilisis consectetur eu id felis
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">
|
||||
Nam auctor fringilla magna id porta
|
||||
</summary>
|
||||
<p class="px-4 py-3 transition-all duration-700">
|
||||
Etiam maximus vitae eros eu vestibulum. Donec posuere, magna non tincidunt dignissim, magna tortor mollis augue, at maximus ante lacus vel tellus. Vestibulum vestibulum consectetur tortor id sagittis. Suspendisse nisi ipsum, pretium a lorem at, laoreet condimentum arcu
|
||||
</p>
|
||||
</details>
|
||||
|
||||
|
||||
<!-- THE CSS -->
|
||||
<style>
|
||||
|
||||
details[open] summary::after {
|
||||
content: "-";
|
||||
transition: all;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- accordion 2 end -->
|
||||
|
||||
|
||||
<!-- accordion 3 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>
|
||||
Accordion 3
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-cyan-200 items-center transition duration-200 ">
|
||||
|
||||
<div class="mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800 max-w-lg">
|
||||
<ul class="w-full transition ">
|
||||
<li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
|
||||
|
||||
<button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
|
||||
What is term?
|
||||
<span class="">
|
||||
<svg class="h-6 fill-current text-gray-500 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
<div class="px-2 bg-gray-50 h-0 overflow-hidden group-hover:h-full transition-height">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque rem quod hic, magnam quis vero nobis cumque esse cum fugit maxime blanditiis quae maiores sint nisi? Vitae dolorem tempora nobis?</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class=" max-w-lg mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800">
|
||||
<ul class="w-full transition ">
|
||||
<li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
|
||||
|
||||
<button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
|
||||
What is term?
|
||||
<span class="">
|
||||
<svg class="h-6 fill-current text-gray-500 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
<div class="px-2 bg-gray-50 h-0 overflow-hidden group-hover:h-full transition-height">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque rem quod hic, magnam quis vero nobis cumque esse cum fugit maxime blanditiis quae maiores sint nisi? Vitae dolorem tempora nobis?</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="max-w-lg mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800">
|
||||
<ul class="w-full transition ">
|
||||
<li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
|
||||
|
||||
<button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
|
||||
What is term?
|
||||
<span class="">
|
||||
<svg class="h-6 fill-current text-gray-500 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
<div class="px-2 bg-gray-50 h-0 overflow-hidden group-hover:h-full transition-height">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque rem quod hic, magnam quis vero nobis cumque esse cum fugit maxime blanditiis quae maiores sint nisi? Vitae dolorem tempora nobis?</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- accordion 3 end -->
|
||||
|
||||
|
||||
<!-- accordion 4 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>
|
||||
Accordion 4
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
|
||||
<div class="h-screen bg-gradient-to-br from-pink-50 to-indigo-100 grid place-items-center">
|
||||
<div class="w-6/12 mx-auto rounded border">
|
||||
<div class="bg-white p-10 shadow-sm">
|
||||
<h3 class="text-lg font-medium text-gray-800">Several Windows stacked on each other</h3>
|
||||
<p class="text-sm font-light text-gray-600 my-3">
|
||||
The accordion is a graphical control element comprising a vertically stacked list of items such as labels or thumbnails
|
||||
</p>
|
||||
|
||||
<div class="h-1 w-full mx-auto border-b my-5"></div>
|
||||
|
||||
<!-- What is term -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg ">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>What is term?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put
|
||||
far daughter.
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- When to use Accordion Components -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>When to use Accordion Components?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put
|
||||
far daughter.
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>How can it be defined?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put
|
||||
far daughter.
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>Chamber reached do he nothing be?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put
|
||||
far daughter.
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.accordion-content {
|
||||
transition: max-height 0.3s ease-out, padding 0.3s ease;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const accordionHeader = document.querySelectorAll(".accordion-header");
|
||||
accordionHeader.forEach((header) => {
|
||||
header.addEventListener("click", () => {
|
||||
const accordionContent = header.parentElement.querySelector(".accordion-content");
|
||||
let accordionMaxHeight = accordionContent.style.maxHeight;
|
||||
|
||||
// Condition handling
|
||||
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
|
||||
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
|
||||
header.querySelector(".fas").classList.remove("fa-plus");
|
||||
header.querySelector(".fas").classList.add("fa-minus");
|
||||
header.parentElement.classList.add("bg-indigo-50");
|
||||
} else {
|
||||
accordionContent.style.maxHeight = `0px`;
|
||||
header.querySelector(".fas").classList.add("fa-plus");
|
||||
header.querySelector(".fas").classList.remove("fa-minus");
|
||||
header.parentElement.classList.remove("bg-indigo-50");
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<!-- accordion 4 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -49,7 +49,7 @@
|
||||
class="container relative z-20 flex flex-col w-full px-5 pb-1 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
|
||||
<h1
|
||||
class="relative z-20 text-5xl font-extrabold leading-none text-purple-500 xl:text-6xl sm:text-center lg:text-left">
|
||||
Designed with<br class="md:hidden lg:block"> <span class="text-gray-800">you in mind</span></h1>
|
||||
Designed with<br class="md:hidden lg:block"> <span class="text-gray-800 dark:text-gray-300">you in mind</span></h1>
|
||||
<p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-xl sm:text-center lg:text-left">We've
|
||||
crafted
|
||||
the ultimate design tool that will help you build the design of your dreams. Built with configuration in
|
||||
@@ -292,12 +292,18 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="my-10">
|
||||
<a href=#>
|
||||
<span class="p-4 px-6 font-medium text-white bg-green-500 border-4 border-transparent rounded-lg hover:bg-green-600">Start Shopping</span>
|
||||
</a>
|
||||
<a href=#>
|
||||
<span class="p-4 px-8 mx-8 font-medium text-gray-700 bg-gray-300 border-4 border-transparent rounded-lg hover:bg-gray-500">Learn More</span>
|
||||
</a>
|
||||
<!-- <a href="#" class="mb-8">
|
||||
<span class="">Start Shopping</span>
|
||||
</a> -->
|
||||
<!-- <a href="#">
|
||||
<span >Learn More</span>
|
||||
</a> -->
|
||||
<button class=" py-4 px-6 mb-6 font-medium text-white bg-green-500 border-4 border-transparent rounded-lg hover:bg-green-600">
|
||||
Start Shopping
|
||||
</button>
|
||||
<button class=" py-4 px-6 font-medium text-gray-700 bg-gray-300 border-4 border-transparent rounded-lg hover:bg-gray-500">
|
||||
Learn More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -1481,7 +1487,7 @@
|
||||
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
|
||||
<div class="sm:text-center lg:text-left">
|
||||
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
|
||||
<span class="block xl:inline">Data to enrich your</span>
|
||||
<span class="block xl:inline dark:text-gray-300">Data to enrich your</span>
|
||||
<span class="block text-indigo-600 xl:inline">online business</span>
|
||||
</h1>
|
||||
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
|
||||
|
||||
Reference in New Issue
Block a user