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
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

2 months ago

271
Feature Card
Elevated card

Author:
Prajwal Hallale

2 years ago

10.2k
Best incamas to date

Author:
ORGIN_DREAMS

3 weeks ago

101
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

10 months ago

2.9k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

1 month ago

181
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

3 months ago

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

Author:
dev-fab250

3 weeks ago

132
Login form

Author:
Rajesh Maheshwari

3 months ago

725
item - product card

Author:
ABDO-SY

3 months ago

435
Testimonial card with image

Author:
Simon Scheffer

2 years ago

11.3k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

49.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components