<!DOCTYPE html>
<
html
lang
=
"en"
dir
=
"ltr"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>Profile Card</
title
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
class="flex justify-center
items-center h-screen bg-gray-200">
<
div
class="card bg-white w-96 overflow-hidden
rounded-lg shadow-lg flex flex-col">
<
div
class
=
"card-image"
>
<
img
src=
alt
=
"Image"
class
=
"w-full h-48 object-cover rounded-t-lg"
/>
</
div
>
<
div
class
=
"profile-image"
>
<
img
src
=
alt
=
""
class="z-10 w-24 h-24 relative mx-auto -mt-16
block rounded-full border-4 border-white
transition-transform duration-400
transform hover:scale-110" />
</
div
>
<
div
class
=
"card-content text-center py-4"
>
<
h3
class
=
"text-xl font-semibold"
>Prerna</
h3
>
<
p
class
=
"text-sm text-justify px-4"
>
Prerna Gupta is a software engineer who recently
got a job at Uber. She has strong problem-solving
skills and attributes her success to the resources
and community at GeeksforGeeks.
</
p
>
</
div
>
<
div
class
=
"icons flex justify-center pb-8"
>
<
a
href
=
"#"
class
=
"fab fa-facebook-f text-2xl mx-2"
></
a
>
<
a
href
=
"#"
class
=
"fab fa-youtube text-2xl mx-2"
></
a
>
<
a
href
=
"#"
class
=
"fab fa-instagram text-2xl mx-2"
></
a
>
<
a
href
=
"#"
class
=
"fab fa-twitter text-2xl mx-2"
></
a
>
<
a
href
=
"#"
class
=
"fab fa-whatsapp text-2xl mx-2"
></
a
>
</
div
>
</
div
>
</
body
>
</
html
>