Chakra UITailwind CSS
Loading Light/Dark Toggle

This is a very basic tutorial of Chakra UI

You can use the <Card></Card> tag to template the card first, then the <CardHeader></CardHeader> with <Heading></Heading> for the header of the card.

You can then use the <CardBody></CardBody> to elaborate on your card's header. <CardFooter></CardFooter> for any buttons that you want to implement.

Here's an example

Random cat photo
An example of a card with image as the card header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

As you can see on the very top of the page, you can see that the navbar is segmented into 2 sides.

Extreme right and extreme left. This can be done using the <Spacer/> tag in between <a></a> tags.