Trivial Card Component Classes
bg-[color]
Sets the background colour of the card. Replace [color]
with the desired colour name or value.
<div class="bg-gray-200">
<!-- Card Content -->
</div>
text-[color]
Specifies the text colour of the card content. Use [color]
for the desired text colour.
<p class="text-blue-500">Card Text</p>
border
and border-[color]
Applies a border to the card. Optionally, you can set the border colour using [color]
.
<div class="border border-gray-300">
<!-- Card Content -->
</div>
rounded-md
or rounded-lg
Adds rounded corners to the card for a softer appearance.
<div class="rounded-md">
<!-- Card Content -->
</div>
shadow-md
or shadow-lg
Applies a shadow to the card, creating a depth effect.
<div class="shadow-md">
<!-- Card Content -->
</div>
p-[padding]
Sets padding around the card content. Replace [padding]
with the desired padding size.
<div class="p-4">
<!-- Card Content -->
</div>
hover:shadow-lg
Adds a larger shadow on hover, enhancing interactivity.
<div class="hover:shadow-lg">
<!-- Card Content -->
</div>
flex
and items-center
or justify-between
:
Aligns card content using flexbox for more control over layout.
<div class="flex items-center justify-between">
<!-- Card Content -->
</div>
hover:bg-[color]
Changes the background color on hover for a subtle interactive effect.
<div class="hover:bg-gray-300">
<!-- Card Content -->
</div>
transition
Applies smooth transitions for a polished user experience.
<div class="transition-transform duration-300 ease-in-out transform hover:scale-105">
<!-- Card Content -->
</div>