Need a CSS expert (Tailwindcss)

I am trying to figure out chatGPT manage to stick the prompt area to the bottom. I copied their code but it doesn't work as expected and I am not sure how to get the same results. any help is appreciated Simple version: https://play.tailwindcss.com/IVZVV4w0jj Original Version: https://play.tailwindcss.com/Vd53rxT94D
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
12 Replies
MarkBoots
MarkBoots•2y ago
instead of absolute use sticky
Ali
Ali•2y ago
@markboots. will not work
MarkBoots
MarkBoots•2y ago
well i changed it on you simple version, and it does work
<div class="sticky bottom-0 w-full bg-green-100 p-2">
<input class="block w-full bg-white p-3" />
</div>
<div class="sticky bottom-0 w-full bg-green-100 p-2">
<input class="block w-full bg-white p-3" />
</div>
Ali
Ali•2y ago
yes but it stacks over the sidebar!
MarkBoots
MarkBoots•2y ago
then put it in the the one where it should be
Ali
Ali•2y ago
it should remain in its container , that is the tricky part
MarkBoots
MarkBoots•2y ago
Ali
Ali•2y ago
fine, but now look at the bottom-right corner
Ali
Ali•2y ago
the full version works perfectly on chatGPT website. but the copied code doesn't work as expected! got the idea?
MarkBoots
MarkBoots•2y ago
i don't work with tailwind a lot (read: at all), and i don't want to dive into what chatgpt does But, with a bit of understanding of css and reading the docs of tailwind, this works
<div class="flex bg-gray-300 min-h-screen" >
<nav class="flex-initial w-60 sticky top-0 bg-gray-700/80">
<div class="sticky top-0">sidebar</div>
</nav>
<div class="flex-1 p-5">
<div class="text-2xl">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, maiores optio doloremque magni quos amet natus eveniet nam, atque dicta sapiente aut error recusandae laborum! Error maiores doloremque veritatis similique.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, maiores optio doloremque magni quos amet natus eveniet nam, atque dicta sapiente aut error recusandae laborum! Error maiores doloremque veritatis similique.</p>
<!--more paragraphs-->
</div>
<div class="sticky bottom-0 bg-green-100 p-2 mb-3">
<input class="w-full bg-white p-3" />
</div>
</div>
</div>
<div class="flex bg-gray-300 min-h-screen" >
<nav class="flex-initial w-60 sticky top-0 bg-gray-700/80">
<div class="sticky top-0">sidebar</div>
</nav>
<div class="flex-1 p-5">
<div class="text-2xl">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, maiores optio doloremque magni quos amet natus eveniet nam, atque dicta sapiente aut error recusandae laborum! Error maiores doloremque veritatis similique.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, maiores optio doloremque magni quos amet natus eveniet nam, atque dicta sapiente aut error recusandae laborum! Error maiores doloremque veritatis similique.</p>
<!--more paragraphs-->
</div>
<div class="sticky bottom-0 bg-green-100 p-2 mb-3">
<input class="w-full bg-white p-3" />
</div>
</div>
</div>
give yourself some time to understand what is what and what it does. don't just copy something without understanding what it does and hoping it will just work. And before using tailwind, make sure you know at least the basics of css
Ali
Ali•2y ago
😲
Ali
Ali•2y ago
here is your solution https://play.tailwindcss.com/flHKgDCOSH start scrolling and you will see
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
Want results from more Discord servers?
Add your server