Css Zero Showcase
x
1
2
3
4
5
6
7
8
<div class="flex flex-col rounded-lg border" style="block-size: 200px;">
  <div class="flex items-center justify-center p-3 border-be resizable-block">
    Header
  </div>
  <div class="flex items-center justify-center p-3 grow">
    Content
  </div>
</div>
1
2
3
4
5
6
7
8
9
<div class="flex flex-col rounded-lg border" style="block-size: 200px;">
  <div class="flex items-center justify-center p-3 border-be resizable-block">
    Header
  </div>
  <div class="flex items-center justify-center p-3 grow">
    Content
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
:is(.resizable-inline, .resizable-block) {
  background-image: linear-gradient(-45deg, var(--color-border) .75rem, transparent .75rem);
  overflow: hidden;
}
.resizable-inline {
  resize: inline;
}
.resizable-block {
  resize: block;
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.