|
4 | 4 | <meta charset="UTF-8" /> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | 6 | <title>@bedard/tailwindcss-dialogs</title> |
| 7 | + <link rel="preconnect" href="https://fonts.bunny.net"> |
| 8 | + <link href="https://fonts.bunny.net/css?family=quicksand:500&display=swap" rel="stylesheet" /> |
7 | 9 | </head> |
8 | | - <body> |
| 10 | + <body class="overflow-hidden"> |
9 | 11 | <div class="bg-gray-50 h-screen overflow-hidden"> |
10 | 12 | <img class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" src="/beams.jpg" width="1308" /> |
11 | 13 |
|
12 | 14 | <div class="absolute inset-0 bg-[url(/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div> |
13 | 15 |
|
14 | | - <div class="absolute z-10"> |
15 | | - <button onclick="document.querySelector('dialog').showModal()"> |
16 | | - Click me |
17 | | - </button> |
| 16 | + <div class="absolute inset-0 px-6 py-12 xl:py-20"> |
| 17 | + <div class="flex flex-col gap-y-6 h-screen items-center max-w-screen-xl mx-auto text-center xl:gap-y-12"> |
| 18 | + <a |
| 19 | + class="font-medium text-lg |
| 20 | + hover:text-rose-500" |
| 21 | + href="https://github.com/scottbedard/tailwindcss-dialogs" |
| 22 | + target="_blank"> |
| 23 | + @bedard/tailwindcss-dialogs |
| 24 | + </a> |
18 | 25 |
|
19 | | - <dialog |
20 | | - class="bg-transparent allow-discrete duration-500 ease-out max-w-screen-sm transition-all opacity-0 -translate-y-6 backdrop:bg-rose-300/0 backdrop:transition-all backdrop:duration-500 backdrop:ease-out open:backdrop:bg-rose-300/20 open:opacity-100 open:translate-y-0 open:from:-translate-y-6 open:from:backdrop:bg-rose-300/0" |
21 | | - onclick="this.close()"> |
22 | | - <div |
23 | | - class="bg-gray-100 drop-shadow-xl m-6 gap-6 grid p-6 rounded-lg" |
24 | | - onclick="event.stopPropagation()"> |
25 | | - <h2 class="font-medium tracking-wide">@bedard/tailwindcss-dialogs</h2> |
| 26 | + <button |
| 27 | + class="text-3xl tracking-wider hover:text-rose-500" |
| 28 | + onclick="document.querySelector('dialog').showModal()"> |
| 29 | + Click here to trigger a dialog |
| 30 | + </button> |
| 31 | + </div> |
| 32 | + </div> |
| 33 | + </div> |
26 | 34 |
|
27 | | - <div class="leading-loose text-sm"> |
28 | | - Thes utilities enable descrete animation of dialog components. Now, it's time to make something beautiful. |
29 | | - </div> |
| 35 | + <dialog |
| 36 | + class="bg-transparent allow-discrete duration-500 ease-out max-w-screen-sm transition-all opacity-0 -translate-y-6 backdrop:bg-rose-300/0 backdrop:transition-all backdrop:duration-500 backdrop:ease-out open:backdrop:bg-rose-300/20 open:opacity-100 open:translate-y-0 open:from:-translate-y-6 open:from:backdrop:bg-rose-300/0" |
| 37 | + onclick="this.close()"> |
| 38 | + <div |
| 39 | + class="bg-gray-100 drop-shadow-xl m-6 gap-6 grid p-6 rounded-lg" |
| 40 | + onclick="event.stopPropagation()"> |
| 41 | + <div class="leading-loose"> |
| 42 | + Let's build some happy little clouds up here. Give him a friend, we forget the trees get lonely too. I'm sort of a softy, I couldn't shoot Bambi except with a camera. All of these beautiful, beautiful things will happen. Anything. As long as you believe. |
| 43 | + </div> |
30 | 44 |
|
31 | | - <div class="flex justify-end text-sm"> |
32 | | - <a class="flex gap-x-1 items-center hover:text-rose-500" href="#"> |
33 | | - View repository |
34 | | - <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> |
35 | | - </a> |
36 | | - </div> |
| 45 | + <div class="flex justify-end"> |
| 46 | + <a |
| 47 | + class="flex gap-x-1 items-center tracking-wide hover:text-rose-500" |
| 48 | + href="https://github.com/scottbedard/tailwindcss-dialogs" |
| 49 | + target="_blank"> |
| 50 | + Visit repository <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> |
| 51 | + </a> |
37 | 52 | </div> |
38 | | - </dialog> |
39 | | - </div> |
| 53 | + </div> |
| 54 | + </dialog> |
40 | 55 | </div> |
41 | 56 |
|
42 | 57 | <script type="module" src="/src/main.ts"></script> |
|
0 commit comments