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

10.2k

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

3 years ago

51.2k
Responsive Features Section

Author:
ariaw

5 months ago

712
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

1 year ago

6.8k
Basic responsive card grid
supports dark mode

Author:
Samuel Dawson

2 years ago

11.5k
Card animate

Author:
Raul antonio de la cruz hernandez

7 months ago

1k
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).

Author:
rohit whyphy

6 months ago

1.1k
Short and simple card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

11.1k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

5 months ago

303
Sponsors section
icon grid

Author:
Sienna

2 years ago

12.4k
avtarCard3

Author:
pablitodgb

3 months ago

594
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

1 month ago

179
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

2 years ago

11.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components