HTML code
This is the html code used to create this tailwind snippet
Download<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About Me</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-slate-500 pt-5">
<section class="py-24 bg-gray-100" id="about">
<div class="max-w-6xl mx-auto px-4">
<!-- Main Content Row -->
<div class="flex flex-wrap items-center flex-col-reverse lg:flex-row">
<!-- Text Content -->
<div class="w-full lg:w-1/2 px-3 order-2 lg:order-2">
<div class="lg:mt-0 mt-8">
<h3 class="text-4xl md:text-5xl font-bold text-indigo-900 mb-2">About Me</h3>
<h6 class="text-lg md:text-xl font-semibold text-rose-500 mb-4">A Lead UX & UI designer based in Canada</h6>
<p class="text-lg max-w-md text-slate-500">
I <span class="font-semibold text-indigo-900 underline decoration-rose-400/60 decoration-2 underline-offset-1">design and develop</span> services for customers of all sizes, specializing in creating stylish, modern websites, web services and online stores. My passion is to design digital user experiences through the bold interface and meaningful interactions.
</p>
<!-- Info List -->
<div class="pt-4">
<div class="flex flex-wrap -mx-3">
<!-- Left Column -->
<div class="w-full md:w-1/2 px-3">
<div class="flex items-center py-2">
<span class="text-indigo-900 font-semibold w-24 flex items-center">
Birthday
<span class="ml-auto mr-2 h-3 w-px bg-indigo-900/50 rotate-[15deg]"></span>
</span>
<p class="text-sm m-0">4th april 1998</p>
</div>
<div class="flex items-center py-2">
<span class="text-indigo-900 font-semibold w-24 flex items-center">
Age
<span class="ml-auto mr-2 h-3 w-px bg-indigo-900/50 rotate-[15deg]"></span>
</span>
<p class="text-sm m-0">22 Yr</p>
</div>
<div class="flex items-center py-2">
<span class="text-indigo-900 font-semibold w-24 flex items-center">
Residence
<span class="ml-auto mr-2 h-3 w-px bg-indigo-900/50 rotate-[15deg]"></span>
</span>
<p class="text-sm m-0">Canada</p>
</div>
<div class="flex items-center py-2">
<span class="text-indigo-900 font-semibold w-24 flex items-center">
Address
<span class="ml-auto mr-2 h-3 w-px bg-indigo-900/50 rotate-[15deg]"></span>
</span>
<p class="text-sm m-0">California, USA</p>
</div>
</div>
<!-- Right Column -->
<div class="w-full md:w-1/2 px-3">
<div class="flex items-center py-2">
<span class="text-indigo-900 font-semibold w-24 flex items-center">
E-mail
<span class="ml-auto mr-2 h-3 w-px bg-indigo-900/50 rotate-[15deg]"></span>
</span>
<p class="text-sm m-0">[email protected]</p>
</div>
<div class="flex items-center py-2">
<span class="text-indigo-900 font-semibold w-24 flex items-center">
Phone
<span class="ml-auto mr-2 h-3 w-px bg-indigo-900/50 rotate-[15deg]"></span>
</span>
<p class="text-sm m-0">820-885-3321</p>
</div>
<div class="flex items-center py-2">
<span class="text-indigo-900 font-semibold w-24 flex items-center">
Skype
<span class="ml-auto mr-2 h-3 w-px bg-indigo-900/50 rotate-[15deg]"></span>
</span>
<p class="text-sm m-0">skype.0404</p>
</div>
<div class="flex items-center py-2">
<span class="text-indigo-900 font-semibold w-24 flex items-center">
Freelance
<span class="ml-auto mr-2 h-3 w-px bg-indigo-900/50 rotate-[15deg]"></span>
</span>
<p class="text-sm m-0">Available</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Avatar -->
<div class="w-full lg:w-1/2 px-3 order-1 lg:order-1">
<div class="lg:mt-0 mt-8">
<img
src="https://bootdey.com/img/Content/avatar/avatar7.png"
alt="Profile Avatar"
class="max-w-full"
>
</div>
</div>
</div>
<!-- Counter Section -->
<div class="bg-white rounded-xl shadow-lg p-6 mt-12">
<div class="flex flex-wrap">
<div class="w-1/2 lg:w-1/4 py-3">
<div class="text-center">
<h6 class="text-3xl font-bold text-indigo-900 mb-1">500</h6>
<p class="font-semibold text-slate-500 m-0">Happy Clients</p>
</div>
</div>
<div class="w-1/2 lg:w-1/4 py-3">
<div class="text-center">
<h6 class="text-3xl font-bold text-indigo-900 mb-1">150</h6>
<p class="font-semibold text-slate-500 m-0">Project Completed</p>
</div>
</div>
<div class="w-1/2 lg:w-1/4 py-3">
<div class="text-center">
<h6 class="text-3xl font-bold text-indigo-900 mb-1">850</h6>
<p class="font-semibold text-slate-500 m-0">Photo Capture</p>
</div>
</div>
<div class="w-1/2 lg:w-1/4 py-3">
<div class="text-center">
<h6 class="text-3xl font-bold text-indigo-900 mb-1">190</h6>
<p class="font-semibold text-slate-500 m-0">Telephonic Talk</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>