Breaking News: Grepper is joining You.com. Read the official announcement!

product list tailwind

barisx answered on June 21, 2023 Popularity 8/10 Helpfulness 2/10

answer product list tailwind

product list tailwind

Comment

import React from 'react';

interface Product {
  category: string;
  title: string;
  price: number;
  imageUrl: string;
}

interface ProductGridProps {
  data?: Product[];
}

const ProductGrid: React.FC<ProductGridProps> = ({ data = [] }) => {
  // Handle empty data
  if (data.length === 0) {
    return <p>No items available.</p>;
  }

  return (
    <section className="text-gray-600 body-font">
      <div className="container px-5 py-24 mx-auto">
        <div className="flex flex-wrap -m-4">
          {data.map((item, index) => (
            <div key={index} className="lg:w-1/4 md:w-1/2 p-4 w-full">
              <a className="block relative h-48 rounded overflow-hidden">
                <img alt="ecommerce" className="object-cover object-center w-full h-full block" src={item.imageUrl} />
              </a>
              <div className="mt-4">
                <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">{item.category}</h3>
                <h2 className="text-gray-900 title-font text-lg font-medium">{item.title}</h2>
                <p className="mt-1">${item.price}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProductGrid;

Popularity 8/10 Helpfulness 2/10 Language typescript

Source: chat.openai.com

Tags: list product typescript

Link to this answer
Share Copy Link

Contributed on Jun 21 2023

barisx

0 Answers Avg Quality 2/10

Closely Related Answers

product list tailwind

Comment

import React from 'react';

const ProductGrid = ({ data }) => {
  return (
    <section className="text-gray-600 body-font">
      <div className="container px-5 py-24 mx-auto">
        <div className="flex flex-wrap -m-4">
          {data.map((item, index) => (
            <div key={index} className="lg:w-1/4 md:w-1/2 p-4 w-full">
              <a className="block relative h-48 rounded overflow-hidden">
                <img alt="ecommerce" className="object-cover object-center w-full h-full block" src={item.imageUrl} />
              </a>
              <div className="mt-4">
                <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">{item.category}</h3>
                <h2 className="text-gray-900 title-font text-lg font-medium">{item.title}</h2>
                <p className="mt-1">${item.price}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProductGrid;

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: javascript product list javasc

Link to this answer
Share Copy Link

Contributed on Jun 21 2023

barisx

0 Answers Avg Quality 2/10

product list tailwind

Contents

More Related Answers

product list tailwind

Closely Related Answers

product list tailwind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.