Home
Gopi Yadav
Minimal Info cards

Minimal Info cards

This tailwind example is contributed by Gopi Yadav, on 18-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Gopi Yadav

10.1k

Fork Fullscreen

<section class="my-8 sm:my-10 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4 p-6">
    <div class="flex flex-col justify-center">
        <div class="flex flex-col h-full shadow justify-between rounded-lg pb-8 p-6 xl:p-8 mt-3 bg-gray-50">
            <div>
                <h4 class=" font-bold text-2xl leading-tight">Quick Start</h4>
                <div class="my-4">
                    <p>Learn how to think in React with step-by-step explanations and interactive examples.</p>
                </div>
            </div>
            <div><a class="mt-1 inline-flex font-bold items-center border-2 border-transparent outline-none focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:text-gray-700 active:ring-0 active:ring-offset-0 leading-normal bg-link text-gray-700 hover:bg-opacity-80 text-base rounded-lg py-1.5"
                    aria-label="Quick Start" target="_self" href="/learn">Read More<svg
                        xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                        class="duration-100 ease-in transition -rotate-90 inline ml-1"
                        style="min-width:20px;min-height:20px">
                        <g fill="none" fill-rule="evenodd" transform="translate(-446 -398)">
                            <path fill="currentColor" fill-rule="nonzero"
                                d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
                                transform="translate(356.5 164.5)"></path>
                            <polygon points="446 418 466 418 466 398 446 398"></polygon>
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
    <div class="flex flex-col justify-center">
        <div class="flex flex-col h-full shadow justify-between rounded-lg pb-8 p-6 xl:p-8 mt-3 bg-gray-50">
            <div>
                <h4 class=" font-bold text-2xl leading-tight">API Reference</h4>
                <div class="my-4">
                    <p>Look up the API of React Hooks, and see their shape with color-coded signatures.</p>
                </div>
            </div>
            <div>
                <a class="mt-1 inline-flex font-bold items-center border-2 border-transparent outline-none focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:text-gray-700 active:ring-0 active:ring-offset-0 leading-normal bg-link text-gray-700 hover:bg-opacity-80 text-base rounded-lg py-1.5"
                    aria-label="API Reference" target="_self" href="/reference/react">Read More<svg
                        xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                        class="duration-100 ease-in transition -rotate-90 inline ml-1"
                        style="min-width:20px;min-height:20px">
                        <g fill="none" fill-rule="evenodd" transform="translate(-446 -398)">
                            <path fill="currentColor" fill-rule="nonzero"
                                d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
                                transform="translate(356.5 164.5)"></path>
                            <polygon points="446 418 466 418 466 398 446 398"></polygon>
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

Related Examples

Info Card
info card with description

Author:
Prashant

2 years ago

12.2k
Cards - Users Card DaddyBrasil
Users card grid list - daddybrasil.com.br

Author:
Casimiro Rocha

7 months ago

1.8k
Hover Card

Author:
Maxim

11 months ago

2.1k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

19.3k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

1.5k
Blog Author Card

Author:
EliteAI Tools

5 months ago

846
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

3 weeks ago

220
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

4 weeks ago

22
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

4 weeks ago

58
Features

Author:
Michael Andreuzza

1 year ago

4k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

4 weeks ago

357
Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

10 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components