/
Gists
/
Tailwind CSS
Gists - Tailwind CSS
On gists
Tailwind CSS
Dynamic component
index.html #
<!--
- https://www.youtube.com/watch?v=sxxUK0l8jKE
- https://play.tailwindcss.com/4cuLPqCv05
-->
<div class="p-20 flex justify-center items-center gap-12">
<img class="avatar-sm" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar-lg" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar-xl" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
</div>
On gists
Tailwind CSS
Advanced from Tailwind 3
index.html #
<!--
https://lab.rjwebdesign.cz/tailwindcss/advanced/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./dist/output.css" rel="stylesheet" />
</head>
<body class="p-5">
<h1 class="mb-4 font-bold text-3xl">1) Peer / Group</h1>
<div class="peer group group/second group/third grid place-items-center bg-slate-600 w-20 h-20 mt-10">
<div class="bg-black w-5 h-5 group-hover:bg-red-500"></div>
<div class="bg-black w-5 h-5 group-hover/second:bg-green-500"></div>
<div class="bg-black w-5 h-5 group-hover/third:bg-orange-500"></div>
</div>
<div class="w-20 h-20 bg-orange-400 mt-10 peer-hover:bg-violet-300"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">2) Animation / Transition</h1>
<div class="w-20 h-20 bg-teal-700 transition-all hover:bg-red-300 delay-300 duration-150"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">3) Responsivenes / BP (ranges)</h1>
<div class="w-20 h-20 bg-red-500 md:max-lg:bg-green-500"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">4) Dynamic variants / props / values</h1>
<div class="w-20 h-20 bg-[theme('colors.blue.300')]"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">5) TW extend / config</h1>
<div class="w-20 h-20 neon-blue"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">6) TW extend -> COLORS</h1>
<div class="text-primary">Hello how are you?</div>
</body>
</html>
On gists
Image from edge to container
•
Tailwind CSS
CSS
index.html #
<!--
@sources
https://play.tailwindcss.com/om6YbfPx0J
https://www.setrimsmalinou.cz/
-->
<!-- FROM LEFT TO RIGHT -->
<div class="relative h-[500px] border-2 border-black">
<!-- image -->
<div class="absolute inset-y-0 w-1/2 bg-red-300">
<img src="https://picsum.photos/id/237/1500/1500" class="h-full w-full object-cover object-center" alt="" />
</div>
<!-- container -->
<div class="mx-auto flex h-full max-w-6xl justify-end border-2 border-green-500">
<div class="w-1/2">Content ...</div>
</div>
</div>
<!-- FROM RIGHT TO LEFT -->
<div class="relative h-[500px] border-2 border-black">
<!-- image -->
<div class="absolute inset-y-0 right-0 w-1/2 bg-red-300">
<img src="https://picsum.photos/id/237/1500/1500" class="h-full w-full object-cover object-center" alt="" />
</div>
<!-- container -->
<div class="mx-auto flex h-full max-w-6xl justify-start border-2 border-green-500">
<div class="w-1/2">Content ...</div>
</div>
</div>