Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created April 29, 2023 18:54
Show Gist options
  • Save neisdev/10fe38a3bef06ce44db942ad19008a06 to your computer and use it in GitHub Desktop.
Save neisdev/10fe38a3bef06ce44db942ad19008a06 to your computer and use it in GitHub Desktop.
Download ZIP
Transition to Auto Height using Grid - Pure CSS Demo
Raw
index.html
<section class="w-screen min-h-screen py-6 px-12 flex flex-col bg-zinc-900 text-zinc-50 items-center justify-center">
<div class="w-full flex flex-col gap-3 max-w-screen-md">
<!-- FAQ 1 Start-->
<div class="w-full rounded bg-zinc-800 hover:bg-zinc-700">
<div class="flex flex-col">
<input id="faq1" type="checkbox" class="ml-auto sr-only peer">
<label for="faq1" class="flex py-2 px-4 mt-2 w-full items-center cursor-pointer">
<span class="font-medium text-lg">What is the meaning of life, the universe, and everything?</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 ml-auto">
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
</svg>
</label>
<div class="grid grid-rows-[0fr] mt-2 overflow-hidden transition-all duration-500 peer-checked:grid-rows-[1fr]">
<div class="min-h-[0] px-4">
<p class="mb-2 text-zinc-200 font-light pr-6">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</div>
<!-- FAQ 1 End-->
<!-- FAQ 2 Start-->
<div class="w-full rounded bg-zinc-800 hover:bg-zinc-700">
<div class="flex flex-col">
<input id="faq2" type="checkbox" class="ml-auto sr-only peer">
<label for="faq2" class="flex py-2 px-4 mt-2 w-full items-center cursor-pointer">
<span class="font-medium text-lg">What is the average airspeed of an unladen swallow?</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 ml-auto">
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
</svg>
</label>
<div class="grid grid-rows-[0fr] mt-2 overflow-hidden transition-all duration-500 peer-checked:grid-rows-[1fr]">
<div class="min-h-[0] px-4">
<p class="mb-2 text-zinc-200 font-light pr-6">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="mb-2 text-zinc-200 font-light pr-6">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</div>
<!-- FAQ 2 End-->
<!-- FAQ 3 Start-->
<div class="w-full rounded bg-zinc-800 hover:bg-zinc-700">
<div class="flex flex-col">
<input id="faq3" type="checkbox" class="ml-auto sr-only peer">
<label for="faq3" class="flex py-2 px-4 mt-2 w-full items-center cursor-pointer">
<span class="font-medium text-lg">Why didn't they just take the eagles to Mordor?</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 ml-auto">
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
</svg>
</label>
<div class="grid grid-rows-[0fr] mt-2 overflow-hidden transition-all duration-500 peer-checked:grid-rows-[1fr]">
<div class="min-h-[0] px-4">
<p class="mb-2 text-zinc-200 font-light pr-6">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="mb-2 text-zinc-200 font-light pr-6">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</div>
<!-- FAQ 3 End-->
</div>
</section>
<button id="toggle">
Toggle Content
</button>
<div id="content">
<div class="inside"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod iure quibusdam corrupti eos quos perspiciatis?</div>
</div>
Raw
scripts
<script src="https://cdn.tailwindcss.com"></script>
Raw
transition-to-auto-height-using-grid-pure-css-demo.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment