1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!--·
··Welcome to WEAVV CSS Playground!
··(?) F1 for Command Palette
··(?) RightClick for more options
··(?) Shift+Alt+LeftClick for multi-selection
··(?) Ctrl+Alt+/ to run code
-->·
··<body class="font-poppins antialised height-full bg-tint-onyx-4 flex flex-column flex-center">
····<div class="(group) relative flex flex-column flex-center">
······<div class="text-lg text-white text-offset-shadow-- offset-x-2 offset-y-2 offset-blur-4 transform (group-hover)translate-y-16 transition duration-300 linear">
········Welcome to WEAVV CSS Demo
······</div>
······<div class="absolute top-20 transform (group-hover)-translate-y-32 transition duration-100 linear flex justify-center items-center">
········<img class="width-32 height-32 object-cover object-center curve-border-full filter brightness-4 saturate-2" src="https://i.pravatar.cc/250?15">
········<a class="padding-x-4 text-xl-2 text-white font-bold (hover)text-underline" href="#">
··········John Doe
········</a>
······</div>
······<div class="stack-1 relative margin-8 (md)max-width-screen-sm flex (sm)flex-row (md)flex-column (md)justify-center (sm)justify-between items-center bg-white curve-border-lg (hover)
shadow-dreamy-lg transition duration-300 linear overflow-hidden cursor-pointer">
········<img class="transform (group-hover)scale-105 duration-300 (md)width-full (sm)width-64 (md)height-40 (sm)height-88 object-cover object-center bg-tint-onyx-3 bg-tint-onyx-5 filter
brightness-4 saturate-2" srcset="https://images.pexels.com/photos/1034662/pexels-photo-1034662.jpeg?auto=compress&cs=tinysrgb&w=300 300w, https://images.pexels.com/photos/
1034662/pexels-photo-1034662.jpeg?auto=compress&cs=tinysrgb&w=640 600w" sizes="70vmin">
········<div class="(md)padding-10 (sm)padding-6 (child-2)padding-t-4 (child-2)text-sm text-tint-onyx-1 font-bold flex flex-gap-8 (md)flex-row (sm)flex-column justify-center items-start
transform (group-hover)-translate-y-6 transition duration-300 linear">
··········<div class="(child-1)padding-t-2 (child-2)padding-t-2 (child-1)text-xl-5 (child-2)text-xl-5">
············<p class="(group-hover)hidden depth-tight-2 transition duration-300 linear (md)text-right">
··············Absolute <br> Silent
············</p>
············<p class="hidden (group-hover)block text-tint-teal-1 depth-tight-2 transition duration-300 linear (md)text-right">
··············Absolute <br> <span class="(group-hover)text-underline">Noisy</span>
············</p>
··········</div>
··········<p class="block">
············Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id magna in purus <span class="text-underline line-thickness-3 line-offset-1">sodales efficitur</span>.
Maecenas consequat sem magna, mollis pulvinar ante tincidunt quis.
··········</p>
········</div>
········<div class="absolute top-2 -right-4">
Enter to Rename, Shift+Enter to Preview