<body class="bg-gray-200 grid place-items-center">
<div class="p-10">
<div class="w-full px-20 py-20 bg-white rounded-md">
<div class="flex">
<div class="relative mr-20">
<div class="h-4 w-4 bg-green-500 absolute bottom-20 right-1 rounded-full ring-2 ring-white ring-offset-4"></div>
<img class="h-64 w-64 rounded-full" src="./images/image.jpg" alt="">
</div>
<div>
<h2 class="text-4xl mb-10">Alicia Turcot</h2>
<div class="flex">
<img class="h-10 w-10 rounded-full mt-1" src="./images/date.png" alt="">
<p class="py-3 pl-5">15 avril</p>
<div class="bg-gray-200 rounded-full py-3"> <span class="bg-white rounded-full w-10 px-5 py-3"> </span><span class="px-5">24 octobre 2023</span></div>
</div>
<div class="flex py-10">
<img class="h-10 w-10 rounded-full" src="./images/chrono.png" alt="">
<p class="px-4 py-2"> 150h-environ 25 h/sem.</p>
</div>
</div>
</div>
<div class="lg:flex m-10">
<div class="w-full h-28 shadow-2xl bg-white rounded-md mr-10 flex items-center px-6 py-3">
<div class="mr-10">
<img class="h-15 w-10 rounded-full" src="./images/mark.png" alt="">
</div>
<div class="flex flex-col">
<span class="text-2xl">Communication</span>
<span>Collège de Maisonneuve 2 ème année</span>
</div>
</div>
<div class="w-full h-28 shadow-2xl bg-white rounded-md flex items-center px-6 py-3 mt-10 lg:mt-0">
<div class="mr-10">
<img class="h-15 w-10 rounded-full" src="./images/loupe.png" alt="">
</div>
<div><span class="text-2xl">Gestionnaire de communauté</span></div>
</div>
</div>
<div class="text-right text-xl p-10">
<a href="" class="mr-10">Consulter les détails</a>
<a href="" class="bg-black text-white px-5 py-3 rounded-md">Envoyer une offre</a>
</div>
</div>
</div>
</body>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.