Card with Thumbnail

Post card with image

This tailwind example is contributed by Mr Robot, on 20-Jul-2022. Component is made with Tailwind v3.4.

Tailwind v3.4 12k 14

<div class="max-w-sm mb-6 md:md-0 col-span-12 sm:col-span-6 lg:col-span-4 border p-4 rounded-lg shadow-lg">
    <a href="#">
        <img srcset="https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?ixlib=php-3.3.1 1x,https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?dpr=2&amp;ixlib=php-3.3.1 2x" src="https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?ixlib=php-3.3.1" class="w-full mb-4 rounded-lg shadow-none transition transition-shadow duration-500 ease-in-out group-hover:shadow-lg" alt="laravel9-1646792144.jpg">
        <div class="flex items-center mb-3">
            <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-bold leading-5 text-white font-display mr-2 capitalize bg-red-500" >
               News
            </span>
            <p class="font-mono text-xs font-normal opacity-75 text-black">September 28th, 2022</p>
        </div>
        <p class="font-display max-w-sm text-2xl font-bold leading-tight">
            <span class="link-underline link-underline-black text-black">
              Laravel 9.32 Released
            </span>
        </p>
    </a>
</div>

Related Examples

Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Video card
Video card component for tailwind css

Rajesh kulkarni

3 years ago

18.3k
Image card with overlay text overlay

Santos78

3 years ago

33.2k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
Responsive Cards

Anonymous

2 years ago

2.6k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Homayoun

11 months ago

1.3k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

1 year ago

2.7k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Md. Tofayel islam

2 years ago

3.8k
landing page

JUGENDRA GANGWAR

2 months ago

192
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Hamza Atig

1 year ago

983
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Isabel McGuigan

2 years ago

3.3k