Social Profile Screen with Photo Grid

Social media profile screen with avatar, bio, follower stats, Follow and Message buttons, posts, reels and tagged tabs and a three-column photo grid.

Also known as: social media profile ui, photo sharing app profile, user profile screen with photo grid, mobile app profile template

Tailwind CSS Mobile Profile Screens Responsive #app #bottom-sheet #gallery #mobile #profile #tabs

Social Profile Screen with Photo Grid live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

Beautify

A social profile screen built with Tailwind CSS: avatar, name, bio, follower stats, Follow and Message buttons, story highlights, posts, reels and tagged tabs and a three-column photo grid. It is an HTML mobile template for mobile websites and PWAs and can be packaged as a native app with Capacitor. Use it as the profile page of a photo sharing app or creator community.

How it works

The root .spg-app is a phone-width column with a sticky top bar, a sticky role="tablist" row and a sticky .spg-tabbar. Each .spg-tab controls one grid panel (#spg-panel-posts, #spg-panel-reels, #spg-panel-tagged); selectTab() in script.js sets aria-selected, roving tabindex and the hidden attribute, and the Arrow, Home and End keys move between tabs.

The Follow button ([data-spg-follow]) is a toggle with aria-pressed. It switches to Following and adds one to the count in data-spg-count.

Every .spg-tile is a button. Tapping one opens #spg-viewer, a full-screen native <dialog> that shows the photo, the caption from data-spg-caption and the like count from data-spg-likes. The Message button opens #spg-message, a bottom sheet with a required textarea: an empty message shows an inline error, a valid one is "sent" after a short timeout and a toast confirms it. The three-dot button opens #spg-more with share, copy link, mute and report options. Sheets close with Escape, a tap on the backdrop or the close buttons, and focus returns to the button that opened them.

Customization

--spg-accent and --spg-accent-press on .spg-app in style.css: colour of the Follow and Send buttons, the verified badge and focus rings.
.spg-avatar-ring in style.css: change the conic gradient around the avatar or remove the class for a plain photo.
Add a post by copying a .spg-tile button and setting data-spg-caption and data-spg-likes; add .spg-badge icons for pinned or multi-photo posts.
.spg-tile--reel sets the 2:3 shape of the reels grid; change aspect-ratio there for 9:16 tiles.
data-spg-count on [data-spg-followers]: the starting follower number used by the Follow toggle.
Replace the setTimeout in the message form submit handler with fetch() to your messaging API.

Use cases

Photo sharing apps: a member profile with posts, reels and tagged photos.
Creator and portfolio communities: photographers or artists showing work with a follow button.
Social features inside other apps: a traveller or recipe author profile in a PWA.
Prototypes and pitch demos: a realistic social media UI to test with users.

Accessibility

Tabs follow the WAI-ARIA tabs pattern, icon-only buttons have aria-label, toggles use aria-pressed and the active tab bar item has aria-current="page". Sheets are modal <dialog> elements with labels, the form error is linked with aria-describedby and announced through aria-live, and toasts use role="status". Touch targets are at least 44 px and animations respect prefers-reduced-motion.

Usage notes

The photos come from Unsplash; replace them with your own images. Bootstrap Icons and the Inter font are loaded from CDNs.

Social Profile Screen with Photo Grid at a glance

Framework: Tailwind CSS
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Tailwind CSS, fonts.googleapis.com, Bootstrap Icons
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Profile Screens
License: Free for personal and commercial use

Questions about this template

Can I use the Social Profile Screen with Photo Grid code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS and fonts.googleapis.com and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.

Social Profile Screen with Photo Grid · Tailwind CSS Mobile Profile Screens