Default card
An example of a default card featuring header and footer sections.
Card Title
Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.
<div class="card">
<div class="card-header">
<h3 class="card-title">
Card Title
</h3>
</div>
<div class="card-body">
Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.
</div>
<div class="card-footer justify-center">
<a class="btn btn-link" href="#">
Example link
</a>
</div>
</div>
Basic
An example of a basic card with no header and footer sections.
Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.
<div class="card">
<div class="card-body">
Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.
</div>
</div>
Scrollable
Implement a scrollable content section utilizing the
Tailwind CSS Scrollable
component.
Card Title
Tailwind CSS, a utility-first CSS framework, has gained immense popularity for its simplicity,
flexibility, and efficiency in building modern web interfaces. Among its plethora of features,
one that stands out is its ability to swiftly create stylish and responsive card components.
These card components serve as fundamental building blocks for organizing content,
displaying information, and enhancing user experience across web applications and websites
The Tailwind CSS card component offers developers a seamless way to structure content within a visually appealing container.
With Tailwind's utility classes, creating cards becomes intuitive and hassle-free,
allowing developers to focus on crafting engaging user interfaces rather than wrestling with complex CSS code
<div class="card">
<div class="card-header">
<h3 class="card-title">
Card Title
</h3>
</div>
<div class="card-body scrollable h-[200px] py-0 my-4 pr-4 mr-2">
<div class="mb-4">
Tailwind CSS, a utility-first CSS framework, has gained immense popularity for its simplicity,
flexibility, and efficiency in building modern web interfaces. Among its plethora of features,
one that stands out is its ability to swiftly create stylish and responsive card components.
These card components serve as fundamental building blocks for organizing content,
displaying information, and enhancing user experience across web applications and websites
</div>
<div>
The Tailwind CSS card component offers developers a seamless way to structure content within a visually appealing container.
With Tailwind's utility classes, creating cards becomes intuitive and hassle-free,
allowing developers to focus on crafting engaging user interfaces rather than wrestling with complex CSS code
</div>
</div>
<div class="card-footer justify-center">
<a class="btn btn-link" href="#">
Example link
</a>
</div>
</div>
Toolbar
Enhance the card header by integrating a toolbar for action controls.
Card Title
Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.
<div class="card">
<div class="card-header">
<h3 class="card-title">
Card Title
</h3>
<div class="flex gap-3">
<label class="switch switch-sm">
<input checked="" class="order-2" name="check" type="checkbox" value="1"/>
<span class="switch-label order-1">
Auto refresh: On
</span>
</label>
</div>
</div>
<div class="card-body">
Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.
</div>
<div class="card-footer justify-center">
<a class="btn btn-link" href="#">
Go to Help Center
</a>
</div>
</div>
Group
Organize the card content into distinct sections.
Card Title
Group content goes here
Group content goes here
Group content goes here
<div class="card">
<div class="card-header">
<h3 class="card-title">
Card Title
</h3>
</div>
<div class="card-group">
Group content goes here
</div>
<div class="card-group">
Group content goes here
</div>
<div class="card-group">
Group content goes here
</div>
<div class="card-footer justify-center">
<a class="btn btn-link" href="#">
Example link
</a>
</div>
</div>
Table
Organize the card content into a structured table format, enabling clear categorization and easy readability of information.
Card Title
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
<div class="card">
<div class="card-header">
<h3 class="card-title">
Card Title
</h3>
</div>
<div class="card-table scrollable-x-auto">
<div class="scrollable-auto">
<table class="table align-middle text-gray-700 font-medium text-sm">
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer justify-center">
<a class="btn btn-link" href="#">
Example link
</a>
</div>
</div>
Grid
Structure the card content into a grid format, facilitating organized presentation with a pagination toolbar.
Card Title
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
<div class="card card-grid">
<div class="card-header">
<h3 class="card-title">
Card Title
</h3>
</div>
<div class="card-table scrollable-x-auto">
<div class="scrollable-auto">
<table class="table table-border align-middle text-gray-700 font-medium text-sm">
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" name="perpage">
<option value="5">
5
</option>
<option value="10">
10
</option>
<option value="25">
25
</option>
<option value="50">
50
</option>
</select>
per page
</div>
<div class="flex items-center gap-4">
<span>
1-10 of 52
</span>
<div class="pagination">
<button class="btn" disabled="">
<i class="ki-outline ki-black-left">
</i>
</button>
<button class="btn">
1
</button>
<button class="btn active">
2
</button>
<button class="btn">
3
</button>
<button class="btn">
<i class="ki-outline ki-black-right">
</i>
</button>
</div>
</div>
</div>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Card component.
Upon building the assets using
Webpack Build Tools
,
the below file is compiled and added into the
dist/assets/css/styles.css
bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/card.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Card component. |
Classes
Utility classes to customize the style and appearance of cards.
| Class | Description |
|---|---|
card-border
|
Add border to the card. |
card-rounded
|
Apply rounded corners to the card. |
card-rounded-b
|
Apply rounded corners to the bottom of the card. |
card-rounded-t
|
Apply rounded corners to the top of the card. |