Home
Hamza Atig
Instagram Post UI Mockup

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 CSS v3. 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

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