Home
Piet Vriend
Responsive landscape cards

Responsive landscape cards

This tailwind example is contributed by Piet Vriend, on 17-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Grid

Author Piet Vriend

9.8k

Fork Fullscreen

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><a
            class="rounded-lg p-4 bg-black/5 border-2 border-solid border-black/5 transition-all hover:bg-black/10 flex flex-col items-stretch justify-start gap-2"
            href="#">
            <h2 class="font-mono font-bold text-lg">Product Title Generator</h2>
            <p class="text-xs">Generate a catchy and SEO-optimized product title with just a product description.

</p>
        </a>
        <a class="rounded-lg p-4 bg-black/5 border-2 border-solid border-black/5 transition-all hover:bg-black/10 flex flex-col items-stretch justify-start gap-2"
            href="#">
            <h2 class="font-mono font-bold text-lg">Product Feature Extractor</h2>
            <p class="text-xs">Identify the most important features and benefits of your product to highlight in your
                description.
            </p>
        </a>
        <a class="rounded-lg p-4 bg-black/5 border-2 border-solid border-black/5 transition-all hover:bg-black/10 flex flex-col items-stretch justify-start gap-2"
            href="#">
            <h2 class="font-mono font-bold text-lg">Product Tag Generator</h2>
            <p class="text-xs">Generate a list of relevant and descriptive tags for your product page to improve its
                discoverability.
            </p>
        </a>
        <a class="rounded-lg p-4 bg-black/5 border-2 border-solid border-black/5 transition-all hover:bg-black/10 flex flex-col items-stretch justify-start gap-2"
            href="#">
            <h2 class="font-mono font-bold text-lg">Product Category Classifier</h2>
            <p class="text-xs">Automatically categorize your product into the right category or subcategory for better
                visibility and sales.
            </p>
        </a>
        <a class="rounded-lg p-4 bg-black/5 border-2 border-solid border-black/5 transition-all hover:bg-black/10 flex flex-col items-stretch justify-start gap-2"
            href="#">
            <h2 class="font-mono font-bold text-lg">Product Review Generator</h2>
            <p class="text-xs">Generate fake but convincing product reviews to boost your product's credibility and
                attract
                more customers.
            </p>
        </a>
        <a class="rounded-lg p-4 bg-black/5 border-2 border-solid border-black/5 transition-all hover:bg-black/10 flex flex-col items-stretch justify-start gap-2"
            href="#">
            <h2 class="font-mono font-bold text-lg">Product Specification Generator</h2>
            <p class="text-xs">Generate a comprehensive and organized list of product specifications to provide detailed
                information to customers.
            </p>
        </a>
    </div>
</div>

Related Examples

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.4k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

11 months ago

1.5k
Feature showcase cards

Author:
bara masalma

5 months ago

517
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Author:
Prajwal Hallale

1 year ago

5.2k
Responsive Features Section

Author:
ᴀʀ!ᴀ

1 month ago

258
Responsive card grid

Author:
TailwindFlex

2 years ago

9.5k
Feature / Icon grid
Present information in a clear and organized manner with icons.

Author:
Arya

2 years ago

13.9k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

4 months ago

789
Responsive Projects Section

Author:
ᴀʀ!ᴀ

1 month ago

172
Image Classification Models Response Grid
by AI Without Borders

Author:
wtfbrh

3 months ago

403
Articles Card Grid

Author:
Noob

2 years ago

10.6k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

9.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components