DEV Community

Cover image for Tailwind CSS Simple Card Examples
saim
saim

Posted on • Edited on • Originally published at larainfo.com

1

Tailwind CSS Simple Card Examples

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

Setup Project
Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Example 1

Simple Card with Title and Content

<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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Example 2

Simple Card with Max width


<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>

Enter fullscreen mode Exit fullscreen mode

Alt Text

Example 3

Simple Card with Image

<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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Example 4

Simple Card Horizontal image

<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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Example 4

Mobile Responsive Horizontal Card

<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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

👉 For more tailwind css

Neon image

Serverless Postgres in 300ms (!)

10 free databases with autoscaling, scale-to-zero, and read replicas. Start building without infrastructure headaches. No credit card needed.

Try for Free →

Top comments (0)

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup 🚀

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

👋 Kindness is contagious

Dive into this informative piece, backed by our vibrant DEV Community

Whether you’re a novice or a pro, your perspective enriches our collective insight.

A simple “thank you” can lift someone’s spirits—share your gratitude in the comments!

On DEV, the power of shared knowledge paves a smoother path and tightens our community ties. Found value here? A quick thanks to the author makes a big impact.

Okay