Join Our Team Using Tailwind UI
Our team’s profile showcase featuring responsive images, skillfully crafted using Tailwind CSS for seamless adaptability. Inspired by Syaqiya Aranya on Dribble
image
Loading component...
180 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.img-size {
height: 24vw;
}
.img-size-mobile {
height: 80vw;
}
</style>
<div class="w-full h-screen container px-8 pt-12 mx-auto">
<div class="text-center mb-8">
<h1 class="text-3xl text-gray-800 font-semibold mb-4">
Innovative Coders
</h1>
<p class="text-gray-600 max-w-lg mx-auto text-lg">
Our team of skilled developers transforms ideas into seamless digital solutions.
</p>
</div>
<div class="w-full hidden sm:flex sm:flex-row flex-col justify-center items-center gap-4 mx-auto pb-11 ">
<div class="relative justify-center items-center h-full lg:w-1/4 w-full">
<img class="object-center object-cover w-full img-size"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Mike-Project Manager" />
<div
class="bottom-2 lg:bottom-4 absolute text-gray-200 rounded-r-full py-1 lg:py-2 px-2 lg:px-4 bg-white w-11/12 xl:w-3/4 flex flex-row justify-between items-center">
<div>
<h4 class="lg:text-sm sm:text-xs font-semibold leading-normal text-gray-800">Mike</h4>
<p class="text-xs lg:text-sm text-gray-600">Project Manajer.</p>
</div>
<svg class="w-4 h-4 lg:w-6 lg:h-6" data-icon-name="verified" data-style="line" icon_origin_id="2970"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="verified" class="icon line" width="48" height="48">
<path style="fill: rgb(35, 31, 32); stroke-width: 1; stroke: rgb(0, 0, 0);"
d="M21.6,9.84A4.57,4.57,0,0,1,21.18,9,4,4,0,0,1,21,8.07a4.21,4.21,0,0,0-.64-2.16,4.25,4.25,0,0,0-1.87-1.28,4.77,4.77,0,0,1-.85-.43A5.11,5.11,0,0,1,17,3.54a4.2,4.2,0,0,0-1.8-1.4A4.22,4.22,0,0,0,13,2.21a4.24,4.24,0,0,1-1.94,0,4.22,4.22,0,0,0-2.24-.07A4.2,4.2,0,0,0,7,3.54a5.11,5.11,0,0,1-.66.66,4.77,4.77,0,0,1-.85.43A4.25,4.25,0,0,0,3.61,5.91,4.21,4.21,0,0,0,3,8.07,4,4,0,0,1,2.82,9a4.57,4.57,0,0,1-.42.82A4.3,4.3,0,0,0,1.63,12a4.3,4.3,0,0,0,.77,2.16,4,4,0,0,1,.42.82,4.11,4.11,0,0,1,.15.95,4.19,4.19,0,0,0,.64,2.16,4.25,4.25,0,0,0,1.87,1.28,4.77,4.77,0,0,1,.85.43,5.11,5.11,0,0,1,.66.66,4.12,4.12,0,0,0,1.8,1.4,3,3,0,0,0,.87.13A6.66,6.66,0,0,0,11,21.81a4,4,0,0,1,1.94,0,4.33,4.33,0,0,0,2.24.06,4.12,4.12,0,0,0,1.8-1.4,5.11,5.11,0,0,1,.66-.66,4.77,4.77,0,0,1,.85-.43,4.25,4.25,0,0,0,1.87-1.28A4.19,4.19,0,0,0,21,15.94a4.11,4.11,0,0,1,.15-.95,4.57,4.57,0,0,1,.42-.82A4.3,4.3,0,0,0,22.37,12,4.3,4.3,0,0,0,21.6,9.84Zm-4.89.87-5,5a1,1,0,0,1-1.42,0l-3-3a1,1,0,1,1,1.42-1.42L11,13.59l4.29-4.3a1,1,0,0,1,1.42,1.42Z">
</path>
</svg>
</div>
</div>
<div class="relative justify-center items-center h-full lg:w-1/4 w-full">
<img class="object-center object-cover w-full img-size"
src="https://images.pexels.com/photos/3756907/pexels-photo-3756907.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Emily-Frontend Dev" />
<div
class="bottom-2 lg:bottom-4 absolute text-gray-200 rounded-r-full py-1 lg:py-2 px-2 lg:px-4 bg-white w-11/12 xl:w-3/4 flex flex-row justify-between items-center">
<div>
<h4 class="lg:text-sm sm:text-xs font-semibold leading-normal text-gray-800">Emily</h4>
<p class="text-xs lg:text-sm text-gray-600">Fronted Dev.</p>
</div>
<svg class="w-4 h-4 lg:w-6 lg:h-6" data-icon-name="verified" data-style="line" icon_origin_id="2970"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="verified" class="icon line" width="48" height="48">
<path style="fill: rgb(35, 31, 32); stroke-width: 1; stroke: rgb(0, 0, 0);"
d="M21.6,9.84A4.57,4.57,0,0,1,21.18,9,4,4,0,0,1,21,8.07a4.21,4.21,0,0,0-.64-2.16,4.25,4.25,0,0,0-1.87-1.28,4.77,4.77,0,0,1-.85-.43A5.11,5.11,0,0,1,17,3.54a4.2,4.2,0,0,0-1.8-1.4A4.22,4.22,0,0,0,13,2.21a4.24,4.24,0,0,1-1.94,0,4.22,4.22,0,0,0-2.24-.07A4.2,4.2,0,0,0,7,3.54a5.11,5.11,0,0,1-.66.66,4.77,4.77,0,0,1-.85.43A4.25,4.25,0,0,0,3.61,5.91,4.21,4.21,0,0,0,3,8.07,4,4,0,0,1,2.82,9a4.57,4.57,0,0,1-.42.82A4.3,4.3,0,0,0,1.63,12a4.3,4.3,0,0,0,.77,2.16,4,4,0,0,1,.42.82,4.11,4.11,0,0,1,.15.95,4.19,4.19,0,0,0,.64,2.16,4.25,4.25,0,0,0,1.87,1.28,4.77,4.77,0,0,1,.85.43,5.11,5.11,0,0,1,.66.66,4.12,4.12,0,0,0,1.8,1.4,3,3,0,0,0,.87.13A6.66,6.66,0,0,0,11,21.81a4,4,0,0,1,1.94,0,4.33,4.33,0,0,0,2.24.06,4.12,4.12,0,0,0,1.8-1.4,5.11,5.11,0,0,1,.66-.66,4.77,4.77,0,0,1,.85-.43,4.25,4.25,0,0,0,1.87-1.28A4.19,4.19,0,0,0,21,15.94a4.11,4.11,0,0,1,.15-.95,4.57,4.57,0,0,1,.42-.82A4.3,4.3,0,0,0,22.37,12,4.3,4.3,0,0,0,21.6,9.84Zm-4.89.87-5,5a1,1,0,0,1-1.42,0l-3-3a1,1,0,1,1,1.42-1.42L11,13.59l4.29-4.3a1,1,0,0,1,1.42,1.42Z">
</path>
</svg>
</div>
</div>
<div class="relative justify-center items-center h-full lg:w-1/4 w-full">
<img class="object-top object-cover w-full img-size"
src="https://images.unsplash.com/photo-1596075780750-81249df16d19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="Johnson-Backend Dev" />
<div
class="bottom-2 lg:bottom-4 absolute text-gray-200 rounded-r-full py-1 lg:py-2 px-2 lg:px-4 bg-white w-11/12 xl:w-3/4 flex flex-row justify-between items-center">
<div>
<h4 class="lg:text-sm sm:text-xs font-semibold leading-normal text-gray-800">Johnson</h4>
<p class="text-xs lg:text-sm text-gray-600">Backend Dev.</p>
</div>
<svg class="w-4 h-4 lg:w-6 lg:h-6" data-icon-name="verified" data-style="line" icon_origin_id="2970"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="verified" class="icon line" width="48" height="48">
<path style="fill: rgb(35, 31, 32); stroke-width: 1; stroke: rgb(0, 0, 0);"
d="M21.6,9.84A4.57,4.57,0,0,1,21.18,9,4,4,0,0,1,21,8.07a4.21,4.21,0,0,0-.64-2.16,4.25,4.25,0,0,0-1.87-1.28,4.77,4.77,0,0,1-.85-.43A5.11,5.11,0,0,1,17,3.54a4.2,4.2,0,0,0-1.8-1.4A4.22,4.22,0,0,0,13,2.21a4.24,4.24,0,0,1-1.94,0,4.22,4.22,0,0,0-2.24-.07A4.2,4.2,0,0,0,7,3.54a5.11,5.11,0,0,1-.66.66,4.77,4.77,0,0,1-.85.43A4.25,4.25,0,0,0,3.61,5.91,4.21,4.21,0,0,0,3,8.07,4,4,0,0,1,2.82,9a4.57,4.57,0,0,1-.42.82A4.3,4.3,0,0,0,1.63,12a4.3,4.3,0,0,0,.77,2.16,4,4,0,0,1,.42.82,4.11,4.11,0,0,1,.15.95,4.19,4.19,0,0,0,.64,2.16,4.25,4.25,0,0,0,1.87,1.28,4.77,4.77,0,0,1,.85.43,5.11,5.11,0,0,1,.66.66,4.12,4.12,0,0,0,1.8,1.4,3,3,0,0,0,.87.13A6.66,6.66,0,0,0,11,21.81a4,4,0,0,1,1.94,0,4.33,4.33,0,0,0,2.24.06,4.12,4.12,0,0,0,1.8-1.4,5.11,5.11,0,0,1,.66-.66,4.77,4.77,0,0,1,.85-.43,4.25,4.25,0,0,0,1.87-1.28A4.19,4.19,0,0,0,21,15.94a4.11,4.11,0,0,1,.15-.95,4.57,4.57,0,0,1,.42-.82A4.3,4.3,0,0,0,22.37,12,4.3,4.3,0,0,0,21.6,9.84Zm-4.89.87-5,5a1,1,0,0,1-1.42,0l-3-3a1,1,0,1,1,1.42-1.42L11,13.59l4.29-4.3a1,1,0,0,1,1.42,1.42Z">
</path>
</svg>
</div>
</div>
<div class="relative justify-center items-center h-full lg:w-1/4 w-full">
<img class="object-top object-cover w-full img-size"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="Sarah-UI/UX Designer" />
<div
class="bottom-2 lg:bottom-4 absolute text-gray-200 rounded-r-full py-1 lg:py-2 px-2 lg:px-4 bg-white w-11/12 xl:w-3/4 flex flex-row justify-between items-center">
<div>
<h4 class="lg:text-sm sm:text-xs font-semibold leading-normal text-gray-800">Sarah</h4>
<p class="text-xs lg:text-sm text-gray-600">UI/UX Designer</p>
</div>
<svg class="w-4 h-4 lg:w-6 lg:h-6" data-icon-name="verified" data-style="line" icon_origin_id="2970"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="verified" class="icon line" width="48" height="48">
<path style="fill: rgb(35, 31, 32); stroke-width: 1; stroke: rgb(0, 0, 0);"
d="M21.6,9.84A4.57,4.57,0,0,1,21.18,9,4,4,0,0,1,21,8.07a4.21,4.21,0,0,0-.64-2.16,4.25,4.25,0,0,0-1.87-1.28,4.77,4.77,0,0,1-.85-.43A5.11,5.11,0,0,1,17,3.54a4.2,4.2,0,0,0-1.8-1.4A4.22,4.22,0,0,0,13,2.21a4.24,4.24,0,0,1-1.94,0,4.22,4.22,0,0,0-2.24-.07A4.2,4.2,0,0,0,7,3.54a5.11,5.11,0,0,1-.66.66,4.77,4.77,0,0,1-.85.43A4.25,4.25,0,0,0,3.61,5.91,4.21,4.21,0,0,0,3,8.07,4,4,0,0,1,2.82,9a4.57,4.57,0,0,1-.42.82A4.3,4.3,0,0,0,1.63,12a4.3,4.3,0,0,0,.77,2.16,4,4,0,0,1,.42.82,4.11,4.11,0,0,1,.15.95,4.19,4.19,0,0,0,.64,2.16,4.25,4.25,0,0,0,1.87,1.28,4.77,4.77,0,0,1,.85.43,5.11,5.11,0,0,1,.66.66,4.12,4.12,0,0,0,1.8,1.4,3,3,0,0,0,.87.13A6.66,6.66,0,0,0,11,21.81a4,4,0,0,1,1.94,0,4.33,4.33,0,0,0,2.24.06,4.12,4.12,0,0,0,1.8-1.4,5.11,5.11,0,0,1,.66-.66,4.77,4.77,0,0,1,.85-.43,4.25,4.25,0,0,0,1.87-1.28A4.19,4.19,0,0,0,21,15.94a4.11,4.11,0,0,1,.15-.95,4.57,4.57,0,0,1,.42-.82A4.3,4.3,0,0,0,22.37,12,4.3,4.3,0,0,0,21.6,9.84Zm-4.89.87-5,5a1,1,0,0,1-1.42,0l-3-3a1,1,0,1,1,1.42-1.42L11,13.59l4.29-4.3a1,1,0,0,1,1.42,1.42Z">
</path>
</svg>
</div>
</div>
</div>
<div class="w-full sm:hidden flex sm:flex-row flex-col justify-center items-center gap-4 mx-auto pb-11 ">
<div class="relative justify-center items-center h-full lg:w-1/4 w-full">
<img class="object-center object-cover w-full img-size-mobile"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Mike-Project Manager" />
<div
class="bottom-4 absolute text-gray-200 rounded-r-full py-2 px-4 bg-white w-3/4 flex flex-row justify-between items-center">
<div>
<h4 class="text-sm font-semibold leading-normal text-gray-800">Mike</h4>
<p class="text-xs text-gray-600">Project Manajer.</p>
</div>
<svg class="w-6 h-6" data-icon-name="verified" data-style="line" icon_origin_id="2970" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" id="verified" class="icon line" width="48" height="48">
<path style="fill: rgb(35, 31, 32); stroke-width: 1; stroke: rgb(0, 0, 0);"
d="M21.6,9.84A4.57,4.57,0,0,1,21.18,9,4,4,0,0,1,21,8.07a4.21,4.21,0,0,0-.64-2.16,4.25,4.25,0,0,0-1.87-1.28,4.77,4.77,0,0,1-.85-.43A5.11,5.11,0,0,1,17,3.54a4.2,4.2,0,0,0-1.8-1.4A4.22,4.22,0,0,0,13,2.21a4.24,4.24,0,0,1-1.94,0,4.22,4.22,0,0,0-2.24-.07A4.2,4.2,0,0,0,7,3.54a5.11,5.11,0,0,1-.66.66,4.77,4.77,0,0,1-.85.43A4.25,4.25,0,0,0,3.61,5.91,4.21,4.21,0,0,0,3,8.07,4,4,0,0,1,2.82,9a4.57,4.57,0,0,1-.42.82A4.3,4.3,0,0,0,1.63,12a4.3,4.3,0,0,0,.77,2.16,4,4,0,0,1,.42.82,4.11,4.11,0,0,1,.15.95,4.19,4.19,0,0,0,.64,2.16,4.25,4.25,0,0,0,1.87,1.28,4.77,4.77,0,0,1,.85.43,5.11,5.11,0,0,1,.66.66,4.12,4.12,0,0,0,1.8,1.4,3,3,0,0,0,.87.13A6.66,6.66,0,0,0,11,21.81a4,4,0,0,1,1.94,0,4.33,4.33,0,0,0,2.24.06,4.12,4.12,0,0,0,1.8-1.4,5.11,5.11,0,0,1,.66-.66,4.77,4.77,0,0,1,.85-.43,4.25,4.25,0,0,0,1.87-1.28A4.19,4.19,0,0,0,21,15.94a4.11,4.11,0,0,1,.15-.95,4.57,4.57,0,0,1,.42-.82A4.3,4.3,0,0,0,22.37,12,4.3,4.3,0,0,0,21.6,9.84Zm-4.89.87-5,5a1,1,0,0,1-1.42,0l-3-3a1,1,0,1,1,1.42-1.42L11,13.59l4.29-4.3a1,1,0,0,1,1.42,1.42Z">
</path>
</svg>
</div>
</div>
<div class="relative justify-center items-center h-full lg:w-1/4 w-full">
<img class="object-center object-cover w-full img-size-mobile"
src="https://images.pexels.com/photos/3756907/pexels-photo-3756907.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Emily-Frontend Dev" />
<div
class="bottom-4 absolute text-gray-200 rounded-r-full py-2 px-4 bg-white w-3/4 flex flex-row justify-between items-center">
<div>
<h4 class="text-sm font-semibold leading-normal text-gray-800">Emily</h4>
<p class="text-xs text-gray-600">Fronted Dev.</p>
</div>
<svg class="w-6 h-6" data-icon-name="verified" data-style="line" icon_origin_id="2970" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" id="verified" class="icon line" width="48" height="48">
<path style="fill: rgb(35, 31, 32); stroke-width: 1; stroke: rgb(0, 0, 0);"
d="M21.6,9.84A4.57,4.57,0,0,1,21.18,9,4,4,0,0,1,21,8.07a4.21,4.21,0,0,0-.64-2.16,4.25,4.25,0,0,0-1.87-1.28,4.77,4.77,0,0,1-.85-.43A5.11,5.11,0,0,1,17,3.54a4.2,4.2,0,0,0-1.8-1.4A4.22,4.22,0,0,0,13,2.21a4.24,4.24,0,0,1-1.94,0,4.22,4.22,0,0,0-2.24-.07A4.2,4.2,0,0,0,7,3.54a5.11,5.11,0,0,1-.66.66,4.77,4.77,0,0,1-.85.43A4.25,4.25,0,0,0,3.61,5.91,4.21,4.21,0,0,0,3,8.07,4,4,0,0,1,2.82,9a4.57,4.57,0,0,1-.42.82A4.3,4.3,0,0,0,1.63,12a4.3,4.3,0,0,0,.77,2.16,4,4,0,0,1,.42.82,4.11,4.11,0,0,1,.15.95,4.19,4.19,0,0,0,.64,2.16,4.25,4.25,0,0,0,1.87,1.28,4.77,4.77,0,0,1,.85.43,5.11,5.11,0,0,1,.66.66,4.12,4.12,0,0,0,1.8,1.4,3,3,0,0,0,.87.13A6.66,6.66,0,0,0,11,21.81a4,4,0,0,1,1.94,0,4.33,4.33,0,0,0,2.24.06,4.12,4.12,0,0,0,1.8-1.4,5.11,5.11,0,0,1,.66-.66,4.77,4.77,0,0,1,.85-.43,4.25,4.25,0,0,0,1.87-1.28A4.19,4.19,0,0,0,21,15.94a4.11,4.11,0,0,1,.15-.95,4.57,4.57,0,0,1,.42-.82A4.3,4.3,0,0,0,22.37,12,4.3,4.3,0,0,0,21.6,9.84Zm-4.89.87-5,5a1,1,0,0,1-1.42,0l-3-3a1,1,0,1,1,1.42-1.42L11,13.59l4.29-4.3a1,1,0,0,1,1.42,1.42Z">
</path>
</svg>
</div>
</div>
<div class="relative justify-center items-center h-full lg:w-1/4 w-full">
<img class="object-top object-cover w-full img-size-mobile"
src="https://images.unsplash.com/photo-1596075780750-81249df16d19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="Johnson-Backend Dev" />
<div
class="bottom-4 absolute text-gray-200 rounded-r-full py-2 px-4 bg-white w-3/4 flex flex-row justify-between items-center">
<div>
<h4 class="text-sm font-semibold leading-normal text-gray-800">Johnson</h4>
<p class="text-xs text-gray-600">Backend Dev.</p>
</div>
<svg class="w-6 h-6" data-icon-name="verified" data-style="line" icon_origin_id="2970" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" id="verified" class="icon line" width="48" height="48">
<path style="fill: rgb(35, 31, 32); stroke-width: 1; stroke: rgb(0, 0, 0);"
d="M21.6,9.84A4.57,4.57,0,0,1,21.18,9,4,4,0,0,1,21,8.07a4.21,4.21,0,0,0-.64-2.16,4.25,4.25,0,0,0-1.87-1.28,4.77,4.77,0,0,1-.85-.43A5.11,5.11,0,0,1,17,3.54a4.2,4.2,0,0,0-1.8-1.4A4.22,4.22,0,0,0,13,2.21a4.24,4.24,0,0,1-1.94,0,4.22,4.22,0,0,0-2.24-.07A4.2,4.2,0,0,0,7,3.54a5.11,5.11,0,0,1-.66.66,4.77,4.77,0,0,1-.85.43A4.25,4.25,0,0,0,3.61,5.91,4.21,4.21,0,0,0,3,8.07,4,4,0,0,1,2.82,9a4.57,4.57,0,0,1-.42.82A4.3,4.3,0,0,0,1.63,12a4.3,4.3,0,0,0,.77,2.16,4,4,0,0,1,.42.82,4.11,4.11,0,0,1,.15.95,4.19,4.19,0,0,0,.64,2.16,4.25,4.25,0,0,0,1.87,1.28,4.77,4.77,0,0,1,.85.43,5.11,5.11,0,0,1,.66.66,4.12,4.12,0,0,0,1.8,1.4,3,3,0,0,0,.87.13A6.66,6.66,0,0,0,11,21.81a4,4,0,0,1,1.94,0,4.33,4.33,0,0,0,2.24.06,4.12,4.12,0,0,0,1.8-1.4,5.11,5.11,0,0,1,.66-.66,4.77,4.77,0,0,1,.85-.43,4.25,4.25,0,0,0,1.87-1.28A4.19,4.19,0,0,0,21,15.94a4.11,4.11,0,0,1,.15-.95,4.57,4.57,0,0,1,.42-.82A4.3,4.3,0,0,0,22.37,12,4.3,4.3,0,0,0,21.6,9.84Zm-4.89.87-5,5a1,1,0,0,1-1.42,0l-3-3a1,1,0,1,1,1.42-1.42L11,13.59l4.29-4.3a1,1,0,0,1,1.42,1.42Z">
</path>
</svg>
</div>
</div>
<div class="relative justify-center items-center h-full lg:w-1/4 w-full">
<img class="object-top object-cover w-full img-size-mobile"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="Sarah-UI/UX Designer" />
<div
class="bottom-4 absolute text-gray-200 rounded-r-full py-2 px-4 bg-white w-3/4 flex flex-row justify-between items-center">
<div>
<h4 class="text-sm font-semibold leading-normal text-gray-800">Sarah</h4>
<p class="text-xs text-gray-600">UI/UX Designer</p>
</div>
<svg class="w-6 h-6" data-icon-name="verified" data-style="line" icon_origin_id="2970" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" id="verified" class="icon line" width="48" height="48">
<path style="fill: rgb(35, 31, 32); stroke-width: 1; stroke: rgb(0, 0, 0);"
d="M21.6,9.84A4.57,4.57,0,0,1,21.18,9,4,4,0,0,1,21,8.07a4.21,4.21,0,0,0-.64-2.16,4.25,4.25,0,0,0-1.87-1.28,4.77,4.77,0,0,1-.85-.43A5.11,5.11,0,0,1,17,3.54a4.2,4.2,0,0,0-1.8-1.4A4.22,4.22,0,0,0,13,2.21a4.24,4.24,0,0,1-1.94,0,4.22,4.22,0,0,0-2.24-.07A4.2,4.2,0,0,0,7,3.54a5.11,5.11,0,0,1-.66.66,4.77,4.77,0,0,1-.85.43A4.25,4.25,0,0,0,3.61,5.91,4.21,4.21,0,0,0,3,8.07,4,4,0,0,1,2.82,9a4.57,4.57,0,0,1-.42.82A4.3,4.3,0,0,0,1.63,12a4.3,4.3,0,0,0,.77,2.16,4,4,0,0,1,.42.82,4.11,4.11,0,0,1,.15.95,4.19,4.19,0,0,0,.64,2.16,4.25,4.25,0,0,0,1.87,1.28,4.77,4.77,0,0,1,.85.43,5.11,5.11,0,0,1,.66.66,4.12,4.12,0,0,0,1.8,1.4,3,3,0,0,0,.87.13A6.66,6.66,0,0,0,11,21.81a4,4,0,0,1,1.94,0,4.33,4.33,0,0,0,2.24.06,4.12,4.12,0,0,0,1.8-1.4,5.11,5.11,0,0,1,.66-.66,4.77,4.77,0,0,1,.85-.43,4.25,4.25,0,0,0,1.87-1.28A4.19,4.19,0,0,0,21,15.94a4.11,4.11,0,0,1,.15-.95,4.57,4.57,0,0,1,.42-.82A4.3,4.3,0,0,0,22.37,12,4.3,4.3,0,0,0,21.6,9.84Zm-4.89.87-5,5a1,1,0,0,1-1.42,0l-3-3a1,1,0,1,1,1.42-1.42L11,13.59l4.29-4.3a1,1,0,0,1,1.42,1.42Z">
</path>
</svg>
</div>
</div>
</div>
</div>