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

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

50.6k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.2k
Feature tiles

Author:
Nishant Trivedi

2 years ago

13.3k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

1 month ago

288
Blog Post List

Author:
Carlos

10 months ago

2.1k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

1 year ago

10.9k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

8 months ago

978
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

9.2k
Tweets showcase grid
Responsive tweets showcase grid

Author:
Freja Jensen

2 years ago

10.7k
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

5 months ago

2k
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

1 year ago

8.2k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

3 months ago

497

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components