added other tempalte parts
This commit is contained in:
merajjahir
@@ -42,6 +42,7 @@
|
||||
<!-- header 3 end -->
|
||||
|
||||
|
||||
|
||||
<!-- hero 3 start -->
|
||||
|
||||
<div class="relative flex flex-col items-center justify-center min-h-screen bg-cover "
|
||||
@@ -81,57 +82,65 @@
|
||||
|
||||
<!-- hero 3 end -->
|
||||
|
||||
|
||||
<!-- accordion 2 start -->
|
||||
|
||||
|
||||
<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>
|
||||
<!-- blog 7 start -->
|
||||
<div class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="container grid grid-cols-12 mx-auto">
|
||||
<div class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover dark:bg-gray-700 lg:col-span-6 lg:h-auto" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;">
|
||||
<div class="flex flex-col items-center p-8 py-12 text-center">
|
||||
<span>12 June</span>
|
||||
<h1 class="py-4 text-5xl font-bold">Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
|
||||
<p class="pb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7">
|
||||
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col col-span-12 p-6 divide-y lg:col-span-6 lg:p-10 divide-gray-700">
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- accordion 2 end -->
|
||||
<!-- blog 7 end -->
|
||||
|
||||
|
||||
<!-- team 1 start -->
|
||||
<section class="dark:bg-gray-800 bg-white py-24">
|
||||
<section class="dark:bg-gray-900 bg-white py-24">
|
||||
<section class="container p-6 mx-auto ">
|
||||
<h2 class="text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
|
||||
<h2 class="text-center text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
|
||||
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
@@ -180,7 +189,7 @@
|
||||
|
||||
<!-- feature 2 start -->
|
||||
|
||||
<section class="bg-white dark:bg-gray-900 py-24">
|
||||
<section class="bg-white dark:bg-gray-800 py-24">
|
||||
<div class="container px-6 py-10 mx-auto">
|
||||
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
|
||||
|
||||
@@ -243,47 +252,47 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- feature 2 end -->
|
||||
|
||||
<!-- testimonial 3 start -->
|
||||
<!-- testimonial 3 start -->
|
||||
|
||||
<section class="text-gray-600 dark:bg-gray-800 body-font ">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-wrap -m-4">
|
||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">Senior Product Designer</p>
|
||||
<section class="text-gray-600 dark:bg-gray-900 body-font ">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-wrap -m-4">
|
||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">Senior Product Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">UI Develeoper</p>
|
||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">UI Develeoper</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 lg:mb-0 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">CTO</p>
|
||||
<div class="lg:w-1/3 lg:mb-0 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">CTO</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- testimonial 3 end -->
|
||||
<!-- testimonial 3 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user