Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

Split Background - Tailwind


Doğuhan ELMA

98 views

1.png

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 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...