HTML code
This is the html code used to create this tailwind snippet
Download<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Cards - Seller Cards</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="mt-5 bg-gray-100">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 - Blue -->
<div class="bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-lg">
<div class="bg-transparent border-b-0 p-6">
<h5 class="mb-0 text-gray-800 text-sm font-semibold inline-block mr-2">Profile</h5>
</div>
<div class="p-6 pt-0 text-center">
<div class="relative inline-block p-1 w-28 h-28 mx-auto">
<div class="absolute top-0 left-0 w-full h-1/2 border-2 border-blue-500 rounded-t-full z-10"></div>
<div class="absolute bottom-0 left-0 w-full h-1/2 border-2 border-blue-500 rounded-b-full z-10"></div>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="absolute top-1 left-1 w-[100px] h-[100px] rounded-full z-20" alt="User Profile Image">
</div>
<h6 class="font-semibold mt-6 mb-2">Alessa Robert</h6>
<p class="text-gray-500 mb-0">Active | Male | Born 23.05.1992</p>
<hr class="my-4 border-gray-200">
<p class="text-gray-500 mt-4">Activity Level: 87%</p>
<ul class="list-none flex justify-center items-center gap-1 mt-2">
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-gray-300"></li>
<li class="inline-block w-12 h-1 mx-1 bg-gray-300"></li>
</ul>
<div class="bg-gradient-to-r from-blue-500 to-blue-400 text-white mt-2 p-5 rounded">
<div class="grid grid-cols-3 gap-4">
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
</svg>
<p class="mb-0 text-lg font-semibold">1256</p>
</div>
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
<p class="mb-0 text-lg font-semibold">8562</p>
</div>
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M14 6l-3.75 5 2.85 3.8-1.6 1.2C9.81 13.75 7 10 7 10l-6 8h22L14 6z"/>
</svg>
<p class="mb-0 text-lg font-semibold">189</p>
</div>
</div>
</div>
<p class="mt-4 text-gray-500">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<hr class="my-4 border-gray-200">
<div class="flex justify-center gap-4">
<a href="#" class="text-blue-600 hover:text-blue-700 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
<a href="#" class="text-sky-400 hover:text-sky-500 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
<a href="#" class="text-pink-500 hover:text-pink-600 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.4 0 0 5.4 0 12c0 5.1 3.2 9.5 7.6 11.2.6.1.8-.2.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.2-3.2 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6C20.8 21.5 24 17.1 24 12 24 5.4 18.6 0 12 0z"/>
</svg>
</a>
</div>
</div>
</div>
<!-- Card 2 - Green -->
<div class="bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-lg">
<div class="bg-transparent border-b-0 p-6">
<h5 class="mb-0 text-gray-800 text-sm font-semibold inline-block mr-2">Profile</h5>
</div>
<div class="p-6 pt-0 text-center">
<div class="relative inline-block p-1 w-28 h-28 mx-auto">
<div class="absolute top-0 left-0 w-full h-1/2 border-2 border-blue-500 rounded-t-full z-10"></div>
<div class="absolute bottom-0 left-0 w-full h-1/2 border-2 border-blue-500 rounded-b-full z-10"></div>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="absolute top-1 left-1 w-[100px] h-[100px] rounded-full z-20" alt="User Profile Image">
</div>
<h6 class="font-semibold mt-6 mb-2">Alessa Robert</h6>
<p class="text-gray-500 mb-0">Active | Male | Born 23.05.1992</p>
<hr class="my-4 border-gray-200">
<p class="text-gray-500 mt-4">Activity Level: 87%</p>
<ul class="list-none flex justify-center items-center gap-1 mt-2">
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-gray-300"></li>
<li class="inline-block w-12 h-1 mx-1 bg-gray-300"></li>
</ul>
<div class="bg-gradient-to-r from-teal-500 to-teal-400 text-white mt-2 p-5 rounded">
<div class="grid grid-cols-3 gap-4">
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
</svg>
<p class="mb-0 text-lg font-semibold">1256</p>
</div>
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
<p class="mb-0 text-lg font-semibold">8562</p>
</div>
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M14 6l-3.75 5 2.85 3.8-1.6 1.2C9.81 13.75 7 10 7 10l-6 8h22L14 6z"/>
</svg>
<p class="mb-0 text-lg font-semibold">189</p>
</div>
</div>
</div>
<p class="mt-4 text-gray-500">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<hr class="my-4 border-gray-200">
<div class="flex justify-center gap-4">
<a href="#" class="text-blue-600 hover:text-blue-700 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
<a href="#" class="text-sky-400 hover:text-sky-500 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
<a href="#" class="text-pink-500 hover:text-pink-600 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.4 0 0 5.4 0 12c0 5.1 3.2 9.5 7.6 11.2.6.1.8-.2.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.2-3.2 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6C20.8 21.5 24 17.1 24 12 24 5.4 18.6 0 12 0z"/>
</svg>
</a>
</div>
</div>
</div>
<!-- Card 3 - Yellow -->
<div class="bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-lg">
<div class="bg-transparent border-b-0 p-6">
<h5 class="mb-0 text-gray-800 text-sm font-semibold inline-block mr-2">Profile</h5>
</div>
<div class="p-6 pt-0 text-center">
<div class="relative inline-block p-1 w-28 h-28 mx-auto">
<div class="absolute top-0 left-0 w-full h-1/2 border-2 border-blue-500 rounded-t-full z-10"></div>
<div class="absolute bottom-0 left-0 w-full h-1/2 border-2 border-blue-500 rounded-b-full z-10"></div>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="absolute top-1 left-1 w-[100px] h-[100px] rounded-full z-20" alt="User Profile Image">
</div>
<h6 class="font-semibold mt-6 mb-2">Alessa Robert</h6>
<p class="text-gray-500 mb-0">Active | Male | Born 23.05.1992</p>
<hr class="my-4 border-gray-200">
<p class="text-gray-500 mt-4">Activity Level: 87%</p>
<ul class="list-none flex justify-center items-center gap-1 mt-2">
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-teal-500"></li>
<li class="inline-block w-12 h-1 mx-1 bg-gray-300"></li>
<li class="inline-block w-12 h-1 mx-1 bg-gray-300"></li>
</ul>
<div class="bg-gradient-to-r from-yellow-500 to-yellow-400 text-white mt-2 p-5 rounded">
<div class="grid grid-cols-3 gap-4">
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
</svg>
<p class="mb-0 text-lg font-semibold">1256</p>
</div>
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
<p class="mb-0 text-lg font-semibold">8562</p>
</div>
<div class="text-center">
<svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M14 6l-3.75 5 2.85 3.8-1.6 1.2C9.81 13.75 7 10 7 10l-6 8h22L14 6z"/>
</svg>
<p class="mb-0 text-lg font-semibold">189</p>
</div>
</div>
</div>
<p class="mt-4 text-gray-500">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<hr class="my-4 border-gray-200">
<div class="flex justify-center gap-4">
<a href="#" class="text-blue-600 hover:text-blue-700 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
<a href="#" class="text-sky-400 hover:text-sky-500 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
<a href="#" class="text-pink-500 hover:text-pink-600 transition">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.4 0 0 5.4 0 12c0 5.1 3.2 9.5 7.6 11.2.6.1.8-.2.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.2-3.2 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6C20.8 21.5 24 17.1 24 12 24 5.4 18.6 0 12 0z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>