@SudhuCodes — A project contributor on SudhuCodes platform.
TailwindCSS — This project belongs to the tailwindcss category.
7/14/2025 — Uploaded to the SudhuCodes project library.
Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.
1<!DOCTYPE html>2<!-- ------Code with SudhuCodes------ -->3<html lang="en">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>SudhuCodes - Step-by-Step Instagram Profile Completion Cards - TailwindCSS Design</title>8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>10</head>11<body class="min-h-screen flex flex-col md:flex-row gap-4 items-center justify-center">1213 <div class="border rounded w-[240px] h-[260px] p-4 flex flex-col items-center justify-center">14 <div class="flex items-center justify-center border rounded-full p-5 mb-3 text-xl text-gray-300 border-gray-300">15 <i class="fa-regular fa-user p-2 px-[9px] rounded-full border border-gray-300"></i>16 </div>17 <p class="font-semibold text-lg">Add profile photo</p>18 <p class="text-center text-sm pt-2 text-gray-600">Choose a profile picture to repersent yourself on instagram</p>19 <button class="bg-blue-500 text-white font-semibold px-4 py-2 rounded-lg mt-3">Add photo</button>20 </div>2122 <div class="border rounded w-[240px] h-[260px] p-4 flex flex-col items-center justify-center">23 <div class="flex items-center justify-center border border-black rounded-full relative p-5 mb-3 text-2xl text-black">24 <i class="fa-regular fa-user px-[1px]"></i>25 <i class="fa-solid fa-check absolute -bottom-1 -right-1 text-sm bg-green-500 text-white py-[3px] px-[6px] rounded-full"></i>26 </div>27 <p class="font-semibold text-lg">Add your name</p>28 <p class="text-center text-sm pt-2 text-gray-600">Add your full name so your friends know it's you</p>29 <button class="bg-gray-200 font-semibold text-black px-4 py-2 rounded-lg mt-3">Edit name</button>30 </div>3132 <div class="border rounded w-[240px] h-[260px] p-4 flex flex-col items-center justify-center">33 <div class="flex items-center justify-center border border-black rounded-full relative p-5 mb-3 text-2xl text-black">34 <i class="fa-regular fa-comment p-[1px]"></i>35 <i class="fa-solid fa-check absolute -bottom-1 -right-1 text-sm bg-green-500 text-white py-[3px] px-[6px] rounded-full"></i>36 </div>37 <p class="font-semibold text-lg">Add bio</p>38 <p class="text-center text-sm pt-2 text-gray-600">Tell your followers a little bit about yourself.</p>39 <button class="bg-gray-200 font-semibold text-black px-4 py-2 rounded-lg mt-3">Edit bio</button>40 </div>4142 <div class="border rounded w-[240px] h-[260px] p-4 flex flex-col items-center justify-center">43 <div class="flex items-center justify-center border border-black rounded-full relative py-5 px-4 mb-3 text-2xl text-black">44 <i class="fa-solid fa-user-group px-[1px]"></i>45 <i class="fa-solid fa-check absolute -bottom-1 -right-1 text-sm bg-green-500 text-white py-[3px] px-[6px] rounded-full"></i>46 </div>47 <p class="font-semibold text-lg">Find pepole to follow</p>48 <p class="text-center text-sm pt-2 text-gray-600">Follow people and interests you care about.</p>49 <button class="bg-gray-200 font-semibold text-black px-4 py-2 rounded-lg mt-3">Find more</button>50 </div>5152</body>53</html>
You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.
Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.
Have suggestions or improvements? Contact us or contribute on GitHub.