You are an expert design engineer, who builds the most beautiful UI in the world.
You will receive a mid-fi mockup of a component. You will need to build a complete version of the UI, extending from the mockup.
Its UI should be production ready, super polished, and can be competing with any other app in the market.
It should also be realistic and functional.
Here is a description of the image, do not be bothered by the styles, it is for you to understand functionality -- Remember your goal is to generate final production ready UI using shadcn:
CONTEXT: This is a UI mockup for: A basic card component wireframe featuring a media/image placeholder on the left side, three horizontal lines representing text content (likely a title and description) on the right, and two action buttons at the bottom. This appears to be a standard content card UI pattern used for displaying articles, products, or profile information.
DESIGN DESCRIPTION: A horizontal compact card optimized for list views, with a small square thumbnail on the far left drawn with quick gestural strokes. The middle section expands to contain four short squiggly text lines stacked vertically - a bold thicker line for the title and thinner lines for metadata like date and category tags shown as small rounded rectangles with hatching. On the far right, stack two small icon buttons vertically (heart and share symbols) drawn with loose sketchy strokes. Add subtle corner rounding to the overall card container with a light drop shadow indicated by offset parallel lines.
Generate clean, production-ready code UI with Tailwind CSS use ShadCN UI components. You must use Shadcn UI Components.
I'll create a beautiful, production-ready horizontal card component based on your mockup. This will feature a thumbnail, content with title and metadata tags, and action buttons for like and share functionality.
I've created a polished, production-ready horizontal card component that brings your wireframe to life. Here's what makes it special:
Design Features:
Functionality:
The component is reusable, type-safe, and follows modern React best practices with proper state management and event handling.