Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aspernatur provident eveniet eligendi cumque consequatur tempore sint nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto itaque quae rem.
Cards
TailwindProvides container elements that wrap and separate content
Stylesheets
Package
Source
Doc
Examples
primary
secondary
tertiary
success
warning
error
surface
glass-primary
glass-secondary
glass-tertiary
glass-success
glass-warning
glass-error
glass-surface
Usage
<div class="card p-4">Basic</div><a href="/" class="card p-4">Link</div>Styles
Background color styling.
<div class="card !bg-primary-500 text-on-primary-token p-4">primary</div>Glass background styling. These are semi-transparent with a slight blur effect.
<div class="card card-glass-primary p-4">glass-primary</div>Headers and Footers
If you wish the split the card into regions, use the following structure.
<div class="card">
<header class="card-header">(header)</header>
<div class="p-4">(body)</div>
<footer class="card-footer">(footer)</footer>
</div>