This is the Card tag. It only adds some nice styles for the inner content, such as shadows, rounded corners etc.
<divclass="w-full"><divclass="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">This is the Card tag. It only adds some nice styles for the inner content, such as shadows, rounded corners etc.</div></div>
Card Header
Copied
This is the CardBody tag.
<divclass="w-full"><divclass="px-4 py-5 flex-auto">This is the CardBody tag.</div></div>
Card Body
Copied
This is the CardBody tag.
This is the CardFooter tag.
<divclass="w-full"><divclass="px-4 py-5 flex-auto">This is the CardBody tag.</div></div><divclass="w-full"><divclass="bg-transparent rounded-b px-5 py-3 border-t border-blueGray-300">This is the CardFooter tag.</div></div>
Card Footer
Copied
This is the CardFooter tag.
<divclass="w-full"><divclass="bg-transparent rounded-b px-5 py-3 border-t border-blueGray-300">This is the CardFooter tag.</div></div>
Card Example
And here is a full example with all of the above. As you can see, now it makes more sense.
Copied
The CardHeader is great for a small description of the below details
And here you would add your main content
This is your card footer content
<divclass="w-full"><divclass="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"><divclass="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-300">The CardHeader is great for a small description of the below details</div><divclass="px-4 py-5 flex-auto">And here you would add your main content</div><divclass="bg-transparent rounded-b px-5 py-3 border-t border-blueGray-300">This is your card footer content</div></div></div>