In late 90s, we do have visiting cards to showcase our portfolio. But now, we are in 20th century where 240px X 240px of div is enough for showcasing our portfolio 💳
<div class="py-8 px-8 max-w-sm mx-auto mt-12 bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="https://thispersondoesnotexist.com/image" alt="Woman's Face">
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
<p class="text-lg text-black font-semibold">
Erin Lindford
</p>
<p class="text-slate-500 font-medium">
Product Engineer
</p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
</div>
</div><div class="flex h-screen w-screen items-center justify-center">
<div class="max-w-sm rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800">
<a href="#">
<img class="rounded-t-lg" src="https://www.apple.com/v/iphone/home/bk/images/meta/iphone__ky2k6x5u6vue_og.png" alt="" />
</a>
<div class="p-5 text-center">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">At your fingertips</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Slate helps you see how many more days you need to work to rich.</p>
<a href="#" class="inline-flex items-center rounded-lg bg-blue-700 py-2 px-3 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Read more
<svg aria-hidden="true" class="ml-2 -mr-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div><div class="flex h-full w-full items-center justify-center bg-slate-800">
<div class="w-64 my-10 max-w-sm rounded-xl border border-gray-200 bg-white shadow-md">
<a href="#"> </a>
<div class="flex flex-col items-center justify-center p-6 text-center">
<a href="#"> </a>
<div class="mt-4 mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-8 w-8 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
<h5 class="mb-5 px-4 font-bold tracking-tight text-gray-700">At your fingertips</h5>
<p class="mb-3 text-sm font-normal text-gray-700">Slate helps you see how many more days you need to work to reach your financial goal.</p>
<button class="my-4 rounded bg-blue-600 py-3 px-4 text-sm font-bold text-white hover:bg-blue-700">Try for free</button>
<img src="https://cdn.mos.cms.futurecdn.net/ypPU5BkLx6jYmawjkhpeNE.png" alt="" />
</div>
</div>
</div><div class="flex h-screen w-screen items-center justify-center">
<div class="max-w-sm rounded-lg border px-8 py-8 border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800">
<span class="flex gap-4 items-center py-4">
<svg class='text-blue-500 h-14' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
<p class='font-bold text-md text-black'>The quick jumps over the lazy dog</p>
</span>
<p class='font-bold text-lg text-slate-500'>The quick fox jumps over the lazy dog the quick fox jumps over the lazy dog</p>
</div>
</div>
</div><div class="m-5">
<div class="ml-1.5 flex items-center rounded-t-lg" style="width: 317px; height: 132px; background-color: #8ec2f2">
<div
class="rounded-full bg-white"
style="
width: 72px;
height: 72px;
margin: right 15px;
margin-left: 50px;
"
></div>
<svg width="35" height="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#1855CB" class="rounded-full bg-white" style="position: absolute; left: 95">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
<div class="ml-4 w-32 font-semibold text-white" style="right: 50px">
<p>The quick</p>
<p>over the lazy dog</p>
</div>
</div>
<div
class="border"
style="
border-color: #a9d6ff;
width: 328px;
padding-left: 50px;
height: 253px;
border-radius: 11px;
"
>
<div class="text-content w-44 text-sm font-semibold" style="padding-top: 30px; color: #737373">- The best products start with Figma</div>
<div class="text-content w-40 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Design with real data</div>
<div class="text-content w-48 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Lightning fast prototyping</div>
<div class="text-content w-40 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Fastest way to organize</div>
<div class="text-content w-44 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Work at the speed of thought.</div>
<div class="font-medium" style="margin-top: 5px">
<a href="#" style="color: #1855cb">Learn More</a>
</div>
</div>
</div><div class="flex h-screen w-screen items-center justify-center bg-blue-100">
<section class="grid gap-6 p-4 max-w-7x1 text-white grid-cols-1 md:grid-cols-2" style={{ margin: "0 auto" }}>
<div class="h-80 relative flex items-end truncate p-4 w-full text-center bg-cover bg-center shadow-xl"
style="background-image: url('https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')"
>
<div class="relative flex flex-col items-center w-full p-4 z-1 transition-transform duration-700 ease-in ">
<h2 class="text-xl font-bold leading-tight py-2 px-8 bg-black bg-opacity-60 rounded">Mountain View</h2>
<p class="italic leading-snug truncate whitespace-pre-wrap max-w-xs max-h-44 bg-black bg-opacity-30 rounded mt-6">Check out all of these gorgeous mountain trips with beautiful views mountains</p>
<button class="cursor-pointer mt-6 py-3 px-6 font-bold text-xs bg-black border-none uppercase tracking-wide hover:bg-red-600">View trips</button>
</div>
</div>
<div class="h-80 relative flex items-end truncate p-4 w-full text-center bg-cover bg-center shadow-xl"
style="background-image: url('https://images.unsplash.com/photo-1505118380757-91f5f5632de0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=626&q=80')"
>
<div class="relative flex flex-col items-center w-full p-4 z-1 transition-transform duration-700 ease-in ">
<h2 class="text-xl font-bold leading-tight py-2 px-8 bg-black bg-opacity-60 rounded">To the Beach</h2>
<p class="italic leading-snug truncate whitespace-pre-wrap max-w-xs max-h-44 bg-black bg-opacity-30 rounded mt-6">Plan your next beach trip with these fabulous destinations</p>
<button class="cursor-pointer mt-6 py-3 px-6 font-bold text-xs bg-black border-none uppercase tracking-wide hover:bg-red-600">View trips</button>
</div>
</div>
</section>
</div>