AI Prompt to Create a Tailwind CSS Product Card

Create an HTML product card using Tailwind CSS from this AI prompt template.

You can enter the following prompt into a Large Language Model (LLM) such as ChatGPT, Claude, or Gemini to create a product card using HTML and Tailwind CSS. The prompt is quite specific, which helps nudge the AI to a result that's likely what you're looking for. Feel free to tweak it as you please.

The Prompt:

Generate an HTML template for a product card component using Tailwind CSS.

Instructions:

  • Do not write any custom CSS in a <style> tag. Use only Tailwind CSS utility classes directly in the HTML.
  • Assume Tailwind CSS is available via a CDN link, so no setup is required.
  • The card should be for an e-commerce product.

Card Structure & Styling:

  • A container div with a white background (bg-white), rounded corners (rounded-lg), a border (border), and a subtle shadow (shadow-md).
  • An image at the top (use a placeholder from https://placehold.co/).
  • A padded area below the image (p-4).
  • Inside the padded area:
    • Product Category in a small, gray, uppercase font (text-xs text-gray-500 uppercase).
    • Product Name in a bold, larger font (font-bold text-lg).
    • Product Price (text-xl font-semibold text-gray-900).
    • An "Add to Cart" button at the bottom. The button should have a solid background color (bg-blue-600), white text (text-white), padding (py-2 px-4), and rounded corners. It should have a hover effect (hover:bg-blue-700).

Final Request: Make the card responsive using Tailwind's breakpoint prefixes (e.g., md:, lg:). For example, it could be full-width on mobile and have a max-width on larger screens.

The Result

When I ran the above prompt against Google Gemini Pro 2.5, I got the following result:

Screenshot of neumorphic UI dashboard AI prompt result

Observation

My request for "An image at the top (use a placeholder from https://placehold.co/)" resulted in an image that's designed to be an actual placeholder (i.e., a blue background with the word "Product"), rather than a random image of some sort. So if you want to get an actual product image rather than the text "Product", you might want to specify that explicitly.

How to Use The Prompt

  1. Copy the entire prompt text.
  2. Paste it into your preferred LLM (e.g., ChatGPT, Claude, Gemini, etc).
  3. Review the generated code. You can ask the LLM for modifications, like changing colors or fonts, by replying with follow-up instructions.

The prompt includes a Core Requirements section that instructs the LLM to focus on quality, accessibility, and responsive design, ensuring you get a professional-grade starting point.

Be sure to check the prompt carefully for anything you want to change first. You can also use it as a template starter for future projects.