card

card products.

This tailwind example is contributed by Lisa, on 24-Jul-2026. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 110 5

<div class="p-6 bg-white min-h-screen transition-colors duration-300 dark:bg-zinc-950">

<div class="flex gap-10 mt-5 flex-wrap justify-center">
    
    
    <div class="w-[320px] bg-[#faf8f8] rounded-xl shadow-[0_4px_10px_rgba(0,0,0,0.15)] overflow-hidden transition-all duration-300 dark:bg-zinc-900 dark:shadow-[0_4px_15px_rgba(0,0,0,0.5)]">
      
      
      <div class="flex justify-center items-center h-[300px] dark:bg-zinc-800/30">
        
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Sketch_Logo.svg/1280px-Sketch_Logo.svg.png" alt="design-tool" class="h-[250px] w-[250px] rounded-xl" />
      </div>
      
      
      <div class="p-[15px_20px_20px] text-left">
        <span class="bg-gainsboro px-2.5 py-px rounded-[5px] text-[#6c75df] text-xs font-semibold dark:bg-zinc-800 dark:text-[#8c95ff]">
          All level
        </span>
        
        
        <h3 class="font-bold text-lg text-[#222] mt-2 dark:text-zinc-100">
          Design & Prototyping Tools
        </h3>
        
        
        <p class="m-0 text-sm text-gray-500 dark:text-zinc-400">
          The logos in your second image represent tools designers use before they ever write a single line of code.
        </p>
        
        
        <div class="text-base font-bold text-red-600 mb-2.5 mt-2 dark:text-red-400">
          $150/course
        </div>
        
        <hr class="border-gray-200 dark:border-zinc-800" />
        
        
        <div class="flex justify-between mt-3.5">
          
          <small class="flex text-sm text-gray-600 dark:text-zinc-400">
            <svg xmlns="http://w3.org" viewBox="0 0 640 640" class="w-5 h-5 mr-1 fill-current"><path d="M568.4 196.5C563.9 207 550 206.3 543.5 196.9C515.7 156.9 477.4 124.7 432.5 104.3C422.1 99.6 418.8 86 428.4 79.7C443.4 69.8 461.4 64 480.7 64C533.3 64 575.9 106.6 575.9 159.2C575.9 172.4 573.2 185 568.3 196.5zM96.5 196.9C90 206.3 76 207 71.6 196.5C66.7 185 64 172.4 64 159.2C64 106.6 106.6 64 159.2 64C178.5 64 196.5 69.8 211.5 79.7C221.1 86 217.8 99.6 207.4 104.3C162.6 124.7 124.3 156.9 96.4 196.9zM454.2 531.4C416.8 559.4 370.3 576 320 576C269.7 576 223.2 559.4 185.9 531.4L150.6 566.6C138.1 579.1 117.8 579.1 105.3 566.6C92.8 554.1 92.8 533.8 105.3 521.3L140.5 486.1C112.6 448.8 96 402.3 96 352C96 228.3 196.3 128 320 128C443.7 128 544 228.3 544 352C544 402.3 527.4 448.8 499.4 486.2L534.6 521.4C547.1 533.9 547.1 554.2 534.6 566.7C522.1 579.2 501.8 579.2 489.3 566.7L454.1 531.5zM344 248C344 234.7 333.3 224 320 224C306.7 224 296 234.7 296 248L296 352C296 358.4 298.5 364.5 303 369L359 425C368.4 434.4 383.6 434.4 392.9 425C402.2 415.6 402.3 400.4 392.9 391.1L343.9 342.1L343.9 248z"/></svg>13h 30min
          </small>
          
          <small class="flex text-sm text-gray-600 dark:text-zinc-400">
            <svg xmlns="http://w3.org" viewBox="0 0 640 640" class="w-5 h-5 mr-1 fill-current"><path d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544L153.5 543.7C121.2 540.4 96 513.1 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM160 384L160 480L288 480L288 384L160 384zM352 384L352 480L480 480L480 384L352 384zM160 320L288 320L288 224L160 224L160 320zM352 320L480 320L480 224L352 224L352 320z"/></svg>15 lecture
          </small>
        </div>
      </div>
      
    </div>
  </div>
</div>

Related Examples

why chose us
Designed with clarity and purpose, each section of our website is crafted to guide users effortlessly from engaging visuals to structured content that highlights our values and builds trust at every scroll. abnahid.com

Abdul Jabbar Al Nahid

11 months ago

867
background animation
background animation

Anonymous

11 months ago

1.2k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Hamza Atig

9 months ago

827
Payment success page example

Anonymous

1 year ago

2.3k
form2

Anonymous

1 week ago

6
super admin
super admin

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.3k
Lifetime Access (iOS 26 Style)
Lifetime Access (iOS 26 Style)

Tanvir Hasan Bappy (Tanvir)

9 months ago

673
random design

QQ-VVN

1 year ago

1.2k
Resizable container
Resizable container

Ganesh Salunke

9 months ago

515
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Muhammad Umair Arshad

1 year ago

2k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.6k
Share button

Maxim

1 year ago

2.2k