Position sticky bottom with Tailwind CSS

An approach to position sticky elements with responsive behaviour in Tailwind CSS. See also a demo in action on the Tailwind Playground: https://play.tailwindcss.com/Og4fSO4GgY

<div class="grid grid-cols-1 lg:grid-cols-2">  <div class="bg-gray-50 p-6">    <div class="flex h-full flex-col">      <div class="w-full rounded-2xl bg-gray-300 py-32 text-center text-gray-700">not sticky</div>      <div class="flex h-full flex-col">        <div class="h-full"></div> <!-- needed to push sticky element to the bottom -->        <div class="sticky bottom-6 mt-6 w-full rounded-2xl bg-gray-300 p-6 text-center text-gray-700">sticky on large breakpoint</div>      </div>    </div>  </div>  <div class="space-y-6 bg-purple-600 p-6">    <div class="rounded-2xl bg-purple-500 py-96 text-center text-purple-50">not sticky</div>    <div class="rounded-2xl bg-purple-500 py-96 text-center text-purple-50">not sticky</div>  </div></div>