Twitter Post (Tweet) UI Mockup

A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

This tailwind example is contributed by Hamza Atig, on 16-Apr-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. 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 1.4k 6

Fork Fullscreen

<div class="flex-1 min-w-0">
        
        <div class="flex justify-between items-center mb-1">
          <div class="flex items-baseline space-x-1 text-sm min-w-0">
            <span class="font-bold text-gray-900 dark:text-gray-100 truncate hover:underline cursor-pointer">
                Full Name
              </span>
            <span class="text-gray-500 dark:text-gray-400 truncate">
                @username
              </span>
            <span class="text-gray-500 dark:text-gray-400">·</span>
            <span class="text-gray-500 dark:text-gray-400 hover:underline cursor-pointer whitespace-nowrap">
                3h
              </span>
          </div>
          <button aria-label="More options" class="text-gray-500 dark:text-gray-400 hover:bg-blue-100 hover:text-blue-500 dark:hover:bg-blue-900 dark:hover:bg-opacity-50 rounded-full p-1.5 -mr-1.5">
              <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>

<p class="text-gray-800 dark:text-gray-100 text-sm sm:text-base leading-normal mb-2">
          Just launched a new project using Tailwind CSS! 🎉 So much faster to build UIs this way. Check it out! <a
            href="#" class="text-blue-500 hover:underline">#webdev</a> <a href="#"
            class="text-blue-500 hover:underline">#tailwindcss</a> <a href="#"
            class="text-blue-500 hover:underline">@tailwindcss</a>
        </p>

<div class="mt-3 rounded-xl border tweet-border overflow-hidden">
          <img src="https://images.unsplash.com/photo-1605379399642-870262d3d051?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
                 alt="Tweet media content" class="w-full object-cover aspect-video">
        </div>

<div class="flex justify-between items-center mt-4 text-gray-500 dark:text-gray-400 text-xs sm:text-sm -ml-2">
          <button aria-label="Reply" class="flex items-center space-x-1 group hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900 dark:hover:bg-opacity-50">
                <svg class="w-4 h-4 sm:w-5 sm:h-5" 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="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14l-3-3m3 3l-3 3"></path></svg>
                <span>15</span>
            </button>
          <button aria-label="Retweet" class="flex items-center space-x-1 group hover:text-green-500 dark:hover:text-green-400 p-2 rounded-full hover:bg-green-100 dark:hover:bg-green-900 dark:hover:bg-opacity-50">
                <svg class="w-4 h-4 sm:w-5 sm:h-5" 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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m-15.357-2A8.001 8.001 0 0019.418 15m0 0H15"></path></svg>
                <span>88</span>
            </button>
          <button aria-label="Like" class="flex items-center space-x-1 group hover:text-red-500 dark:hover:text-red-400 p-2 rounded-full hover:bg-red-100 dark:hover:bg-red-900 dark:hover:bg-opacity-50">
                <svg class="w-4 h-4 sm:w-5 sm:h-5" 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>
                <span>312</span>
            </button>
          <button aria-label="View tweet analytics" class="flex items-center space-x-1 group hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900 dark:hover:bg-opacity-50">
                <svg class="w-4 h-4 sm:w-5 sm:h-5" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                 <span>21.5K</span>
            </button>
          <button aria-label="Share or Bookmark" class="flex items-center space-x-1 group hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900 dark:hover:bg-opacity-50">
                 <svg class="w-4 h-4 sm:w-5 sm:h-5" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
             </button>
        </div>
      </div>
    </article>
  </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.9k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Responsive Article Section

Prashant

4 years ago

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

Noob

4 years ago

24.9k
Articles Card Grid

Noob

4 years ago

11.8k
Info cards
Show various statistics on your website

Arya

4 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Features grid

Sophia Baker

3 years ago

10.9k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.5k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.7k