YouTube Community Post UI Mockup

A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

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,Author box, User information,simulation,copy,dummy,miniature,like,Article Card, Blog page card, Article card

Card Blog post page Form Profile Other eCommerce Grid Mockup Blog Card

Author Hamza Atig

Tailwind v3.4 1.8k 3

Fork Fullscreen

<div class="flex justify-between items-start mb-3">
        <div class="flex items-center space-x-3">
          <img class="w-10 h-10 rounded-full object-cover flex-shrink-0"
                 src="https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80"
                 alt="Channel Avatar">
          <div class="text-sm min-w-0">
            <div class="flex items-center space-x-1">
              <a href="#"
                class="font-medium text-yt-light-text-primary dark:text-yt-dark-text-primary hover:underline truncate">
                Channel Name Here
              </a>
              <svg class="w-3.5 h-3.5 yt-verified-badge flex-shrink-0" fill="currentColor" viewBox="0 0 16 16"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                  d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <p class="text-xs text-yt-light-text-secondary dark:text-yt-dark-text-secondary">
              2 hours ago
            </p>
          </div>
        </div>
        <button aria-label="More options" class="text-yt-light-text-secondary dark:text-yt-dark-text-secondary hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full p-1.5 -mt-1 -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="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
          </button>
      </div>

<div
        class="text-sm text-yt-light-text-primary dark:text-yt-dark-text-primary mb-3 break-words whitespace-pre-wrap">
        <p>Quick update! We're working on a new series exploring advanced CSS techniques. What topics would you love to see covered? 🤔 Let us know in the comments! 👇<br><br>Also, thanks for 500K subscribers! 🎉</p>
      </div>

<div class="mb-3 rounded-lg overflow-hidden">
        <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
                 alt="Post media content" class="w-full object-cover">
      </div>

<div class="flex items-center space-x-4 text-yt-light-text-secondary dark:text-yt-dark-text-secondary">
        <div class="flex items-center space-x-1">
          <button aria-label="Like this post" class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full p-1.5">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
          <span class="text-xs font-medium">3.1K</span>
        </div>
        <button aria-label="View comments" class="flex items-center space-x-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full p-1.5 px-2">
                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /></svg>
                 <span class="text-xs font-medium">112</span>
            </button>
        <button aria-label="Share this post" class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full p-1.5 ml-auto">
                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" /></svg>
            </button>
      </div>

<div class="mt-4 pt-3 border-t yt-light-border dark:yt-dark-border flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full object-cover flex-shrink-0"
                 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-yt-light-text-secondary dark:text-yt-dark-text-secondary flex-grow cursor-text">
          Add a comment...
        </p>
      </div>

</div>
  </div>

</body>

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
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
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.7k
Payment form (Alpine JS)

Mr Robot

4 years ago

10.6k
Responsive Article Section

Prashant

4 years ago

17.2k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.6k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Noob

4 years ago

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

Noob

3 years ago

24.8k
User profile card with Cover Image

Noob

3 years ago

33.8k
Articles Card Grid

Noob

4 years ago

11.8k