ForkUI

Sidebar

All Components

Feature Card Simple Shop Card

Shop Card

A simple shop card with name, price, and image.

Earthen Bottle$48

Elegant porcelain bottle with natural clay

Nomad Tumbler$35

Durable insulated tumbler unique design

Focus Paper Refill$89

Premium paper refill for productivity

Mechanical Pencil$35

Precision machined steel mechanical pencil

Shop Card Code Breakdown

🛍️ Responsive Grid Layout

A dynamic grid system that adapts seamlessly across different device sizes using Tailwind's responsive utilities.

// Grid configuration
<div className="grid 
  grid-cols-4      // Default 4 columns
  sm:grid-cols-2   // 2 columns on small screens
  lg:grid-cols-4   // Back to 4 columns on large screens
  gap-6            // Consistent spacing between grid items
">
  {/* Product cards */}
</div>

`grid-cols-4`: Sets 4 columns as default layout
`sm:grid-cols-2`: Switches to 2 columns on small screens
`lg:grid-cols-4`: Reverts to 4 columns on large screens
`gap-6`: Provides consistent 1.5rem (24px) spacing between items

Mobile-first responsive design
Adaptive column count
Consistent grid spacing

🖼️ Image Presentation

Advanced image styling that ensures consistent visual presentation with smooth interactive effects.

<img 
  src={product.image}
  className="
    w-full           // Full width of container
    h-64             // Fixed height (16rem/256px)
    object-cover     // Maintain aspect ratio
    opacity-90       // Slightly reduced opacity
    hover:opacity-100 // Full opacity on hover
    transition-opacity // Smooth transition
"
/>

`w-full`: Ensures image spans entire card width
`h-64`: Sets a consistent 16rem (256px) height
`object-cover`: Maintains image aspect ratio
`opacity-90`: Subtle initial opacity
`hover:opacity-100`: Full opacity on interaction
`transition-opacity`: Smooth 0.3s transition

Consistent image sizing
Responsive object fitting
Interactive hover effect

🎨 Typography and Interaction

Carefully designed text and button styles that create a clear visual hierarchy and engaging user experience.

<div className="flex justify-between items-center">
  <a href={product.link} className="
    text-white           // White text color
    hover:text-white/80  // Slightly transparent on hover
    text-lg              // Large text size
    font-semibold        // Semi-bold weight
  ">
    {product.name}
  </a>
  <button className="
    bg-sky-600           // Sky blue background
    text-white           // White text
    hover:bg-sky-700     // Darker blue on hover
    py-2 rounded-md      // Padding and rounded corners
  ">
    Add to Cart
  </button>
</div>

`text-white`: Provides clean, high-contrast text
`hover:text-white/80`: Subtle hover interaction
`bg-sky-600`: Vibrant button background
`hover:bg-sky-700`: Darker shade on interaction
`rounded-md`: Moderate border radius

Clean, readable typography
Interactive hover states
Consistent color scheme

🔧 Card Interactivity

Sophisticated card-level interactions that provide visual feedback and enhance user engagement.

<div className="
  bg-gray-800           // Dark background
  hover:bg-gray-700     // Slightly lighter on hover
  rounded-xl            // Rounded corners
  overflow-hidden       // Clip child elements
  shadow-md             // Medium shadow
  transition-colors     // Color transition
  duration-300          // 300ms transition
">
  {/* Card content */}
</div>

`bg-gray-800`: Deep gray background
`hover:bg-gray-700`: Lighter shade on interaction
`rounded-xl`: Significant border radius
`shadow-md`: Subtle depth effect
`transition-colors`: Smooth color change
`duration-300`: Transition speed

Smooth background transitions
Depth through shadows
Consistent interaction design

Menu