Tailwind CSS Simple Card Examples
Tags: tailwindcss, css, webdev, tutorial
Published: 2021-07-14 10:06:10

In this tutorial we will see simple card, vertical card, card with image ,mobile responsive card, horizontal card, examples with Tailwind CSS


####Tool Use
_Tailwind CSS 2.x_
_unsplash Image_

👉 [View Demo](https://larainfo.com/blogs/tailwind-css-simple-card-examples)

Setup Project
Using CDN

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```
or 

[The Easiest way to install Tailwind CSS with Tailwind CLI](https://larainfo.com/blogs/the-easiest-way-to-install-tailwind-css-with-tailwind-cli)

[How to Install Tailwind CSS with NPM](https://larainfo.com/blogs/how-to-install-tailwind-css-with-npm)

####Example 1
Simple Card with Title and Content
```html
<div class="p-4 w-80">
    <div class="p-8 bg-white rounded shadow-md">
        <h2 class="text-2xl font-bold text-gray-800">Card Title</h2>
        <p class="text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur deserunt
            quas repellat facere dolor blanditiis tenetur quibusdam corporis quaerat. Impedit, repellendus!
            Delectus et illum eum ipsa magni? Facilis, molestiae est!</p>
    </div>
</div>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8itwwzt1lng2oae81bw.png)


####Example 2
Simple Card with Max width
```html

<div class="max-w-xl p-4">
    <div class="p-8 bg-white rounded shadow-md">
        <h2 class="text-2xl font-bold text-gray-800">Card Title</h2>
        <p class="text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur deserunt
            quas repellat facere dolor blanditiis tenetur quibusdam corporis quaerat. Impedit, repellendus!
            Delectus et illum eum ipsa magni? Facilis, molestiae est!</p>
    </div>
</div>

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1vo9ku3cx5zsokg2s92.png)

####Example 3
Simple Card with Image
```html
<div class="max-w-xs rounded-lg shadow-lg">
    <img class="w-full h-48"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=989&q=80"
        alt="product" />
    <div class="px-6 py-4">
        <h4 class="mb-3 text-xl font-semibold tracking-tight text-gray-800">This is the title</h4>
        <p class="leading-normal text-gray-700">Lorem ipsum dolor, sit amet cons ectetur adipis icing elit.
            Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.</p>
    </div>
</div>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9at7fmkk2ytwclgudwz.png)

####Example 4
Simple Card Horizontal image 
```html
<div class="bg-white rounded-lg shadow-xl lg:flex lg:max-w-lg">
    <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=989&q=80"
        class="w-1/1 lg:w-1/2 rounded-l-2xl">
    <div class="p-6">
        <h2 class="mb-2 text-2xl font-bold text-gray-900">This is the title</h2>
        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ipsum ab
            rem, consequuntur autem totam sit minima porro?</p>
    </div>
</div>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz8kn4hwgqg4qucs9qx2.png)

###Example 4
Mobile Responsive Horizontal Card
```html
<div class="mx-4 bg-white rounded-lg shadow-xl lg:flex lg:max-w-lg">
    <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=989&q=80"
        class="w-1/1 lg:w-1/2 rounded-l-2xl">
    <div class="p-6">
        <h2 class="mb-2 text-xl font-bold text-gray-900 lg:text-2xl">This is the title</h2>
        <p class="text-sm text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            ipsum ab
            rem, consequuntur autem totam sit minima porro?</p>
    </div>
</div>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njm526amunu8x4mzex1u.png)

👉 [For more tailwind css](https://larainfo.com/tailwind-css)