Created
February 15, 2025 14:57
-
-
Save zorky/a667e632c13458774b3ea6e8bcc83a1a to your computer and use it in GitHub Desktop.
Simple Container Queries
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="@container grid place-items-center w-screen h-screen"> | |
| <button class="w-max flex items-center gap-2 p-4 @[9em]:px-6 rounded-lg text-sm bg-emerald-200 text-emerald-950"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" class="size-5"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /> | |
| </svg> | |
| <span class="sr-only @[9em]:not-sr-only"> | |
| Download <span class="sr-only @[13em]:not-sr-only">PDF file</span> | |
| </span> | |
| </button> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://unpkg.com/@tailwindcss/browser@4"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment