The latest articles on DEV Community by Andreu Pifarre (@andreu_pifarre_929397e2bb). https://dev.to/andreu_pifarre_929397e2bb https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2687918%2F1091970d-37a1-4ecc-b526-8df48be7546d.png https://dev.to/andreu_pifarre_929397e2bb en Andreu Pifarre Sun, 03 Aug 2025 20:49:28 +0000 https://dev.to/andreu_pifarre_929397e2bb/recreating-apples-airtag-landing-page-in-react-tailwind-8-min-speed-run-3mp5 https://dev.to/andreu_pifarre_929397e2bb/recreating-apples-airtag-landing-page-in-react-tailwind-8-min-speed-run-3mp5 <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv53bhr0mnkphpc9m0bs8.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv53bhr0mnkphpc9m0bs8.png" alt=" " width="800" height="800"></a></p> <h2> Rebuilding Apple’s AirTag Page in React + Tailwind </h2> <p>Apple’s product pages are great examples of clean design, subtle animation, and precise typography. Inspired by this, I set myself a challenge: <strong>could I recreate the AirTag landing page and present the process in under ten minutes?</strong><br><br> The result is a pixel‑perfect build using <strong>React (Vite)</strong> and <strong>Tailwind CSS</strong>, documented in an <strong>eight‑minute speed‑run video</strong>.</p> <h2> Why the AirTag Page? </h2> <p>The official AirTag page opens with the tagline <em>“Lose your knack for losing things”</em> and uses simple sections like:</p> <ul> <li> <em>“Ping it. Find it.”</em> </li> <li> <em>“Precision Finding”</em> </li> <li> <em>“Get by with a little help”</em> (<a href="https://www.apple.com/airtag" rel="noopener noreferrer">apple.com/airtag</a>)</li> </ul> <p>These elements make it a great UI challenge—<strong>minimal content but high polish</strong>.</p> <h2> Setup </h2> <p><strong>Scaffolding</strong> – Bootstrapped a Vite + React + TypeScript project and added Tailwind CSS.<br><br> <strong>Figma</strong> – Created a layout in Figma inspired by Apple’s page and exported the assets. The Figma file is included in the repo’s <code>figma</code> folder.<br><br> <strong>Components</strong> – Each section (hero, feature cards, CTA) is a separate React component. Tailwind utility classes handle spacing, and typography.<br><br> <strong>Speed‑run video</strong> – I recorded the build process and condensed it into a fast-paced video that runs just over eight minutes.</p> <h2> See It in Action </h2> <p>🎬 <a href="https://youtu.be/cXrOBLCQqkY" rel="noopener noreferrer"><strong>Watch the 8‑minute build video</strong></a><br><br> 💻 <a href="https://github.com/andreupifarre/apple-airtag" rel="noopener noreferrer"><strong>Browse the code on GitHub</strong></a></p> <h2> Lessons Learned </h2> <ul> <li> <strong>Utility‑first styling speeds things up</strong> – Tailwind let me prototype quickly without leaving the markup. </li> <li> <strong>Figma is a great source of truth</strong> – Having a pixel‑perfect reference meant less guesswork. </li> <li> <strong>Feedback is invaluable</strong> – I’m eager to hear from other front‑end devs—how would you enhance this? <ul> <li>Maybe add animations </li> <li>Improve accessibility </li> <li>Refactor the component structure?</li> </ul> </li> </ul> <p>Feel free to share feedback in the comments or submit pull requests!</p> webdev react tailwindcss frontend