Tailwind card component example

tailwind

Here is an example of a card component using Tailwind CSS:


<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://via.placeholder.com/600x400" alt="Card image" class="w-full h-64 object-cover">
    <div class="p-4">
        <h2 class="text-2xl font-bold text-gray-700">Card title</h2>
        <p class="text-gray-600">Card content</p>
    </div>
</div>

In this example, the bg-white class adds a white background color to the card, the rounded-lg class adds rounded corners, the shadow-md class adds a medium shadow effect, and the overflow-hidden class hides any content that overflows the card.

The w-full and h-64 classes make the image take up the full width and a height of 64 units, respectively, and the object-cover class scales the image to cover the container while preserving its aspect ratio.

The text-2xl class makes the title text 2 times the size of the base font, the font-bold class makes the title text bold, and the text-gray-700 class adds a dark gray color to the title text. The text-gray-600 class adds a light gray color to the content text.

You can customize this card component by modifying the classes used or by adding additional content and styling as needed.




Other Article on Tag tailwind

  1. - Tailwind add padding in t-head and body
  2. - Tailwind Breadcrumb style example
  3. - Tailwind button group style example
  4. - Tailwind button style example
  5. - Tailwind card component example
  6. - Tailwind create component in an Angular project
  7. - Tailwind CSS accordion style example
  8. - Tailwind CSS advantages and disadvantages
  9. - Tailwind CSS dropdown style example
  10. - Tailwind CSS install to angular
Show All


All Tags

reactcakephpjavascriptjqueryjavaangularsemantic-uibootstrapscullyapachenodejsprogrammingdockerlaravelspringbootcodeigniterhtmlrediscssneo4jfacebooknextjsnestjsnexusubuntuipfsjpapostgresqlmysqlbitcoinquantumtailwindbulmaxtzethprometheusgrafanaknowledge