Basic Card
A simple card with basic content using the .card class.
Card Title
This is a basic card with some sample content.
<div class="card">
<h3>Card Title</h3>
<p>This is a basic card with some sample content.</p>
</div>Card with Image
A card that includes an image, title, text, and a button.
Card with Image
This card includes an image at the top, followed by content and a button.
<div class="card">
<img src="image.jpg" alt="Sample image" class="card-image">
<div class="p-3">
<h3 class="card-title">Card with Image</h3>
<p class="card-text">This card includes an image at the top...</p>
<button class="btn btn-primary">Learn More</button>
</div>
</div>Card Grid Layout
Multiple cards arranged in a responsive grid layout.
Card 1
Content for card 1
Card 2
Content for card 2
Card 3
Content for card 3
<div class="grid grid-cols-1 md-grid-cols-2 lg-grid-cols-3 gap-3">
<div class="card">
<h3 class="card-title">Card 1</h3>
<p class="card-text">Content for card 1</p>
</div>
<div class="card">
<h3 class="card-title">Card 2</h3>
<p class="card-text">Content for card 2</p>
</div>
<div class="card">
<h3 class="card-title">Card 3</h3>
<p class="card-text">Content for card 3</p>
</div>
</div>Card with Footer
A card with a separated footer section.
Card with Footer
This is the main content of the card.
<div class="card">
<div class="p-3">
<h3 class="card-title">Card with Footer</h3>
<p class="card-text">This is the main content of the card.</p>
</div>
<div class="card-footer">
<div class="flex justify-between items-center">
<span>Posted by John Doe</span>
<button class="btn btn-primary">Share</button>
</div>
</div>
</div>