Minimal Info cards

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

Card

Author Gopi Yadav

Tailwind v3.4 11k 16

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

Prashant

4 years ago

13.4k
3D Modern Pricing Card
Here's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.

dev-fab250

1 year ago

1.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Profile Card
User profile card

Ajay Thakur

1 year ago

558
carde avec effet apple
carde avec effet apple

Omer fils ELENGA

5 months ago

862
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Nick Girga

1 year ago

1.3k
Phone Simulator with Built-in Car Racing Game and Play.
This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.

Arjun Kumar

4 months ago

651
3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Nicole Shalom

1 year ago

2.1k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Interactive 3D Morphing Globe - Sphere to Star
3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

Visernic

4 months ago

523
Food delivery ecommerce Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.9k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k