Home
Hamza Atig
Tailwind CSS Service Card Component

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 CSS v3. 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

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