Talking about layouting on a technical level is very abstract. Here are six fairly common
compositions of elements.
to keep the examples from being cluttered
with tons of classes. You can easily do this with vanilla HTML/CSS or any other frontend framework as
well.
<Row left gap={2}>
<Icon name="steam" />
Steam
</Row>
React JSX
<Column left>
<Link href="/">Home</Link>
<Link href="/our-values">Our values</Link>
<Link href="/about-us">About us</Link>
</Column>
React JSX
<Row>
<Icon name="spinner" className="animate-spin" />
</Row>
React JSX
<Row gap={2}>
<div className="overflow-hidden w-12 rounded-full">
<img src="/user-image.jpg" alt="" />
</div>
<Column left>
<span className="leading-4">Kim Korte</span>
<span className="text-gray-400 text-sm">Developer</span>
</Column>
</Row>
React JSX
<Column left>
<Row left gap={2} className="text-gray-400 w-full p-2">
<div className="flex-1">Name</div>
<div className="w-1/5">Quantity</div>
<div className="w-1/5">Created</div>
<div className="w-1/5" />
</Row>
<hr />
<!-- iterate this Row -->
<Row className="w-full p-2 hover:bg-gray-50" left gap={2}>
<div className="flex-1">First item</div>
<div className="w-1/5">62</div>
<div className="w-1/5">24-11-2023</div>
<Row className="w-1/5" right>
<Button className="row gap-2 !flex-nowrap">
<Icon name="download" />
Download
</Button>
</Row>
</Row>
</Column>
React JSX
<Column gap={4}>
<input className="hidden" type="radio" name="carousel" id="third" />
<input className="hidden" type="radio" name="carousel" id="second" />
<input className="hidden" type="radio" name="carousel" id="first" />
<Row className="w-full aspect-video overflow-hidden bg-white" left>
<Row className="h-full w-[300%] !flex-nowrap duration-500 transition-transform" left>
<Column className="h-full w-full flex-none bg-gray-600">
<span className="font-medium">Click the dots to change slide.</span>
This carousel is fully responsive.
</Column>
<Row className="h-full w-full flex-none bg-gray-500" up left>
I'm up here! Up, left!
</Row>
<Column className="h-full w-full flex-none bg-gray-400">
<span className="font-medium">Fun fact:</span>
This carousel works without javascript!
</Column>
</Row>
</Row>
<Row gap={2}>
<label for="first" className="h-4 w-4 rounded-full bg-gray-300" />
<label for="second" className="h-4 w-4 rounded-full bg-gray-300" />
<label for="third" className="h-4 w-4 rounded-full bg-gray-300" />
</Row>
</Column>
<style>
input[id='first']:checked + div > div {
transform: translateX(-0%);
}
input[id='second']:checked + * + div > div {
transform: translateX(-100%);
}
input[id='third']:checked + * + * + div > div {
transform: translateX(-200%);
}
</style>
React JSX
