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="h-screen bg-sky-300 pt-20">
<div
class="mx-auto max-w-sm space-y-2 rounded-xl bg-white py-8 px-8 shadow-lg shadow-red-300 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 sm:py-4"
>
<img
class="mx-auto block h-24 rounded-full sm:mx-0 sm:shrink-0"
src="https://thispersondoesnotexist.com/image"
alt="Woman's Face"
/>
<div class="space-y-2 text-center sm:text-left">
<div class="space-y-0.5">
<p class="text-lg font-semibold text-black">J S Vignesh Kanna</p>
<p class="font-medium text-slate-500">Software Engineer</p>
</div>
<button
class="rounded-full border border-purple-200 px-4 py-1 text-sm font-semibold text-purple-600 hover:border-transparent hover:bg-purple-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
>
Message
</button>
</div>
</div>
</div><div class="h-full bg-sky-300 py-10">
<div class="w-screen px-6">
<div
class="max-w-sm rounded-lg border border-red-200 bg-blue-600 shadow-lg shadow-rose-300"
>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
<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="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white">
At your fingertips
</h5>
</a>
<p class="mb-3 font-normal text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos
voluptate magni error fugiat beatae veritatis inventore natus, minima
velit illum numquam, voluptatum, voluptas obcaecati similique libero.
Aperiam natus delectus porro?
</p>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
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><div class="h-full bg-sky-300 px-8 py-16">
<div
class="my-10 w-64 max-w-sm rounded-xl border border-gray-200 bg-white shadow-md"
>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
</a>
<div class="flex flex-col items-center justify-center p-6 text-center">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
</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-6 w-6 text-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 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">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt in
commodi ullam rem explicabo est quas quidem dolorum quae? Blanditiis
similique nesciunt nobis cum dolorum sapiente, quia odit repellendus
magnam?
</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="h-full bg-sky-300 px-10 py-16">
<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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
</svg>
<p class='font-bold text-md text-black'>People come here for cool tailwind CSS UI components</p>
</span>
<p class='font-bold text-lg text-slate-500'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore at ex aliquid ipsa praesentium magnam quia molestiae sint, eveniet soluta autem ipsam fuga maiores nostrum velit unde natus placeat ea.</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="w-max rounded-lg bg-rose-300 px-4 py-2 font-medium"
style="margin-top: 5px"
>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
style="color: #1855cb"
>Learn More</a
>
</div>
</div>
</div><div class="flex h-screen w-screen items-center justify-center bg-sky-300">
<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://th.bing.com/th/id/OIP.7Tue3HtDK6rJB9UIswxz9QHaEo?pid=ImgDet&rs=1');
"
>
<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://i.pinimg.com/originals/23/d4/ed/23d4edf6d6852b20538ab336879b8ec3.jpg');
"
>
<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>