Instagram Post UI Mockup

A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

This tailwind example is contributed by Hamza Atig, on 16-Apr-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are blog page template, article page template,simulation,copy,dummy,miniature,like,Article Card, Blog page card, Article card

Card Blog post page Other Grid Mockup Blog Card

Author Hamza Atig

Tailwind v3.4 2.1k 5

Fork Fullscreen

<div class="flex items-center justify-between p-3 border-b insta-border">
            <div class="flex items-center space-x-3">
                <img class="w-8 h-8 rounded-full object-cover"
                     src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80"
                     alt="User Avatar">
                <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">username_here</span>
            </div>
            <button aria-label="More options" class="text-gray-900 dark:text-gray-100">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path></svg>
            </button>
        </div>

<div>
            <img class="w-full object-cover"
                 src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
                 alt="Post Content">
        </div>

<div class="flex justify-between items-center p-4">
            <div class="flex space-x-4">
                <button aria-label="Like post" class="text-gray-900 dark:text-gray-100 hover:text-gray-500 dark:hover:text-gray-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                </button>
                <button aria-label="Comment on post" class="text-gray-900 dark:text-gray-100 hover:text-gray-500 dark:hover:text-gray-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path xmlns="http://www.w3.org/2000/svg" d="M8.2881437,19.1950792 C8.38869181,19.1783212 8.49195996,19.1926955 8.58410926,19.2362761 C9.64260561,19.7368747 10.8021412,20 12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,13.7069096 4.53528582,15.3318588 5.51454846,16.6849571 C5.62010923,16.830816 5.63909672,17.022166 5.5642591,17.1859256 L4.34581002,19.8521348 L8.2881437,19.1950792 Z M3.58219949,20.993197 C3.18698783,21.0590656 2.87870208,20.6565881 3.04523765,20.2921751 L4.53592782,17.0302482 C3.54143337,15.5576047 3,13.818993 3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C10.707529,21 9.4528641,20.727055 8.30053434,20.2068078 L3.58219949,20.993197 Z"/></svg>
                </button>
                <button aria-label="Share post" class="text-gray-900 dark:text-gray-100 hover:text-gray-500 dark:hover:text-gray-400">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path xmlns="http://www.w3.org/2000/svg" d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
            </div>
            <button aria-label="Save post" class="text-gray-900 dark:text-gray-100 hover:text-gray-500 dark:hover:text-gray-400">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path></svg>
            </button>
        </div>

<div class="px-4 pb-2">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                1,234 likes
            </p>
        </div>

<div class="px-4 pb-2">
            <p class="text-sm text-gray-900 dark:text-gray-100">
                <a href="#" class="font-semibold hover:underline">username_here</a>
                This is an example caption for the Instagram post mockup. It can be a few sentences long. #coding
                #tailwindcss #webdev
            </p>
        </div>

<div class="px-4 pb-2">
            <a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:underline">
                View all 56 comments
            </a>
        </div>

<div class="px-4 pb-4 border-t insta-border mt-2 pt-3">
            <div class="flex items-center space-x-3">
                <img class="w-7 h-7 rounded-full object-cover"
                     src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80"
                     alt="Your Avatar">
                <p class="text-sm text-gray-400 dark:text-gray-500 flex-grow">Add a comment...</p>
                <button class="text-sm font-semibold text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 opacity-50 cursor-not-allowed">Post</button>
            </div>
        </div>

</div>

</body>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.7k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Articles Card Grid

Noob

4 years ago

11.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.8k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k