Tailwind CSS Service Card Component

An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

This tailwind example is contributed by Hamza Atig, on 16-Apr-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Product Showcase, Product card,simulation,copy,dummy,miniature,like

Card Form Other Product Grid Mockup

Author Hamza Atig

Tailwind v3.4 1.6k 4

Fork Fullscreen

<div class="min-h-screen flex items-center justify-center p-4">

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden max-w-sm w-full">
        
        <div class="relative">
            <img src="https://placehold.co/600x400/cccccc/444444?text=Video+Preview" alt="Service Preview" class="w-full h-48 object-cover">
            
            <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 rounded-full p-3 hover:bg-opacity-70 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-white">
                        <path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" />
                    </svg>
                </button>
            
            <button class="absolute top-3 right-3 text-white p-1 rounded-full bg-black bg-opacity-30 hover:bg-opacity-50 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
                    </svg>
                </button>
        </div>

<div class="p-4">
            
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center space-x-2">
                    <img class="w-8 h-8 rounded-full object-cover" src="https://placehold.co/40x40/007acc/white?text=T" alt="Seller Avatar">
                    <span class="font-semibold text-gray-800 dark:text-gray-100">Test Seller</span>
                </div>
                <span class="bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-400 text-xs font-semibold px-2.5 py-0.5 rounded">Top Rated ♦♦♦</span>
            </div>

<p
                class="text-gray-700 dark:text-gray-300 mb-3 text-base hover:text-green-600 dark:hover:text-green-400 cursor-pointer">
                Product Description Here, Product Description Here
            </p>

<div class="flex items-center space-x-1 mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                    class="w-5 h-5 text-yellow-500"> {/* Yellow star often works well in both modes */}
                    <path fill-rule="evenodd"
                        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354l-4.599 2.935c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
                        clip-rule="evenodd" />
                </svg>
                <span class="font-bold text-gray-800 dark:text-gray-100">4.9</span>
                <span class="text-sm text-gray-600 dark:text-gray-400">(1k+)</span>
            </div>

<div class="flex items-baseline justify-between mb-3">
                <p class="text-gray-800 dark:text-gray-100">
                    <span class="text-sm text-gray-600 dark:text-gray-400">From</span>
                    <span class="font-bold text-lg"> US$70</span>
                    <span class="text-sm text-gray-600 dark:text-gray-400"> / 5 minutes</span>
                </p>
            </div>

<div class="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 dark:bg-white dark:rounded-sm">
                    <path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
                        d="M15.3276 7.54199H8.67239C5.29758 7.54199 3.61017 7.54199 2.66232 8.52882C1.71447 9.51565 1.93748 11.0403 2.38351 14.0895L2.80648 16.9811C3.15626 19.3723 3.33115 20.5679 4.22834 21.2839C5.12553 21.9999 6.4488 21.9999 9.09534 21.9999H14.9046C17.5512 21.9999 18.8745 21.9999 19.7717 21.2839C20.6689 20.5679 20.8437 19.3723 21.1935 16.9811L21.6165 14.0895C22.0625 11.0403 22.2855 9.51564 21.3377 8.52882C20.3898 7.54199 18.7024 7.54199 15.3276 7.54199ZM14.5812 15.7942C15.1396 15.448 15.1396 14.5519 14.5812 14.2057L11.2096 12.1156C10.6669 11.7792 10 12.2171 10 12.9098V17.0901C10 17.7828 10.6669 18.2207 11.2096 17.8843L14.5812 15.7942Z"
                        fill="#1C274C" />
                </svg>
                <span>Offers video consultations</span>
            </div>
        </div>
    </div>

</div>

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.7k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

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

Noob

3 years ago

24.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.8k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.2k