Doğuhan ELMA tarafından Flexbox - Grid yayınlanma tarihi
115 görünüm
HTML
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"> </head> <body> <div class="grid min-h-screen place-items-center bg-cyan-500"> <div class="fixed inset-0 hidden elm-background-split min-[480px]:grid"> <div class="col-span-2 bg-cyan-600"></div> <div class="col-span-2 bg-cyan-700"></div> </div> <div class="isolate mx-auto w-full max-w-2xl px-8"> <div class="grid h-80 overflow-hidden rounded-2xl shadow-2xl min-[480px]:grid-cols-[theme(width.56),1fr]"> <aside class="bg-slate-100"></aside> <main class="bg-white"></main> </div> </div> </div> </body> </html>
Tailwind input.css
@tailwind base; @tailwind components; @tailwind utilities; @layer components { .elm-background-split { @apply grid-cols-[minmax(theme(padding.8),1fr),theme(width.56),minmax(0,calc(theme(maxWidth.2xl)-theme(width.56)-(theme(padding.8)*2))),minmax(theme(padding.8),1fr)]; } }
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.