<section class="py-6">
<div class="container mx-auto px-4">
<div class="relative p-8 border border-gray-200 rounded-2xl">
<a class="absolute top-0 right-0 mt-4 mr-4" href="#">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 11.5C14.3284 11.5 15 10.8284 15 10C15 9.17157 14.3284 8.5 13.5 8.5C12.6716 8.5 12 9.17157 12 10C12 10.8284 12.6716 11.5 13.5 11.5Z" fill="#7A899B"></path>
<path d="M6.5 11.5C7.32843 11.5 8 10.8284 8 10C8 9.17157 7.32843 8.5 6.5 8.5C5.67157 8.5 5 9.17157 5 10C5 10.8284 5.67157 11.5 6.5 11.5Z" fill="#7A899B"></path>
</svg>
</a>
<div class="flex mb-6 items-center">
<img class="object-cover mr-4 rounded-2xl w-16 h-16" src="https://images.unsplash.com/photo-1593789382576-54f489574d26?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128" alt="">
<div>
<div class="flex items-center mb-1">
<h6 class="text-blue-900 font-semibold mr-2">Super Mario</h6>
<span class="px-3 py-1 bg-blue-50 rounded-md text-blue-500 text-xs font-bold uppercase">72 tasks</span>
</div>
<p class="text-gray-500 text-sm">Project Manager</p>
</div>
</div>
<p class="mb-8 text-gray-500 text-sm">I distinguish three main text objectives could be merely to inform people. A second could be persuade people. You want people to bay objective.</p>
<div class="flex mb-6 items-center justify-between">
<div class="flex items-center">
<svg class="mr-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
<path d="M9.06046 9.06069L9.81633 6.17676L6.93914 6.93932L6.34814 9.65163L9.06046 9.06069Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="text-gray-500 text-sm">Location</p>
</div>
<p class="text-gray-500 text-sm">Warsaw, Poland</p>
</div>
<div class="flex mb-6 items-center justify-between">
<div class="flex items-center">
<svg class="mr-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 3H14V12.4444C14 12.5918 13.9473 12.7331 13.8536 12.8373C13.7598 12.9415 13.6326 13 13.5 13H2.5C2.36739 13 2.24021 12.9415 2.14645 12.8373C2.05268 12.7331 2 12.5918 2 12.4444V3Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14 3L8 8L2 3" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="text-gray-500 text-sm">Email address</p>
</div>
<p class="text-gray-500 text-sm">super.mario@gmail.com</p>
</div>
<div class="flex mb-8 items-center justify-between">
<div class="flex items-center">
<svg class="mr-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M13.5 5H2.5C2.22386 5 2 5.22386 2 5.5V13.5C2 13.7761 2.22386 14 2.5 14H13.5C13.7761 14 14 13.7761 14 13.5V5.5C14 5.22386 13.7761 5 13.5 5Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M11 4V3C11 2.73478 10.8736 2.48043 10.6485 2.29289C10.4235 2.10536 10.1183 2 9.8 2H6.2C5.88174 2 5.57652 2.10536 5.35147 2.29289C5.12643 2.48043 5 2.73478 5 3V4" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2 8H14" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="text-gray-500 text-sm">Company</p>
</div>
<p class="text-gray-500 text-sm">Nintendo</p>
</div>
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<a href="#" class="w-full inline-flex items-center justify-center px-6 py-3 h-full rounded-2xl text-white text-sm font-medium shadow-sm bg-blue-500 hover:bg-blue-600 focus:ring focus:ring-blue-300 transition duration-200">
<span class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<g clip-path="url(#clip0_1631_1244)">
<path d="M2.6946 11.4494C1.85561 10.0351 1.56179 8.36309 1.86831 6.74744C2.17483 5.1318 3.06061 3.68362 4.35932 2.67485C5.65803 1.66607 7.28032 1.1661 8.92158 1.2688C10.5628 1.37151 12.1101 2.06983 13.273 3.23264C14.4358 4.39545 15.1341 5.94275 15.2368 7.58401C15.3395 9.22526 14.8396 10.8476 13.8308 12.1463C12.822 13.445 11.3738 14.3308 9.75821 14.6373C8.14256 14.9438 6.47059 14.65 5.05624 13.811L5.05626 13.811L2.72397 14.4773C2.62747 14.5049 2.52536 14.5062 2.42821 14.481C2.33106 14.4558 2.24242 14.4051 2.17145 14.3342C2.10049 14.2632 2.0498 14.1745 2.02462 14.0774C1.99945 13.9803 2.00071 13.8781 2.02829 13.7816L2.69466 11.4494L2.6946 11.4494Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.25 6.59375H10.75" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.25 9.40625H10.75" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_1631_1244">
<rect width="16" height="16" fill="white" transform="translate(0.5)"></rect>
</clipPath>
</defs>
</svg>
</span>
<span>Message</span>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<a href="#" class="w-full py-3 px-4 rounded-2xl border border-gray-200 inline-flex items-center justify-center bg-white hover:bg-gray-50 text-blue-900 text-sm font-medium transition duration-200 focus:ring focus:ring-gray-200">
<span class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none">
<path d="M6.5 7.5C8.15685 7.5 9.5 6.15685 9.5 4.5C9.5 2.84315 8.15685 1.5 6.5 1.5C4.84315 1.5 3.5 2.84315 3.5 4.5C3.5 6.15685 4.84315 7.5 6.5 7.5Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
<path d="M1.95264 10.1246C2.41368 9.32654 3.07661 8.6639 3.87483 8.20321C4.67305 7.74251 5.57845 7.49999 6.50008 7.5C7.42171 7.50001 8.3271 7.74255 9.12531 8.20326C9.92353 8.66397 10.5864 9.32663 11.0475 10.1247" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span>Profile</span>
</a>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
