Back to Discover
Tailwind CSS Blog Post Card Example

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-6">

  <div class="max-w-4xl w-full grid md:grid-cols-2 gap-6">

    <!-- Blog Card 1 -->
    <article 
             x-data="{ liked: false, likes: 124 }"
             class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden">

      <img 
           src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&q=80" 
           alt="Blog post cover"
           class="w-full h-48 object-cover">

      <div class="p-6">
        <div class="flex items-center gap-2 text-sm text-gray-500 mb-3">
          <span class="bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-xs font-medium">Technology</span>
          <span>•</span>
          <span>5 min read</span>
        </div>

        <h2 class="text-xl font-semibold text-gray-900 mb-2 hover:text-blue-600 transition-colors cursor-pointer">
          Getting Started with Modern Web Development
        </h2>

        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
          Discover the essential tools and frameworks that will help you build modern, responsive web applications in 2024.
        </p>

        <div class="flex items-center justify-between pt-4 border-t border-gray-100">
          <div class="flex items-center gap-3">
            <img 
                 src="https://i.pravatar.cc/150?img=12" 
                 alt="Author"
                 class="w-8 h-8 rounded-full">
            <div class="text-sm">
              <p class="font-medium text-gray-900">Sarah Johnson</p>
              <p class="text-gray-500 text-xs">Mar 15, 2024</p>
            </div>
          </div>

          <button 
                  @click="liked = !liked; likes = liked ? likes + 1 : likes - 1"
                  class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors">
            <ion-icon 
                      :name="liked ? 'heart' : 'heart-outline'" 
                      :class="liked ? 'text-red-500' : ''"
                      class="text-xl"></ion-icon>
            <span class="text-sm" x-text="likes"></span>
          </button>
        </div>
      </div>
    </article>

    <!-- Blog Card 2 -->
    <article 
             x-data="{ bookmarked: false, liked: false, likes: 89 }"
             class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden">

      <img 
           src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80" 
           alt="Blog post cover"
           class="w-full h-48 object-cover">

      <div class="p-6">
        <div class="flex items-center gap-2 text-sm text-gray-500 mb-3">
          <span class="bg-purple-50 text-purple-600 px-3 py-1 rounded-full text-xs font-medium">Design</span>
          <span>•</span>
          <span>8 min read</span>
        </div>

        <h2 class="text-xl font-semibold text-gray-900 mb-2 hover:text-blue-600 transition-colors cursor-pointer">
          The Art of Minimalist UI Design
        </h2>

        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
          Learn how to create beautiful, functional interfaces using minimalist design principles and modern best practices.
        </p>

        <div class="flex items-center justify-between pt-4 border-t border-gray-100">
          <div class="flex items-center gap-3">
            <img 
                 src="https://i.pravatar.cc/150?img=33" 
                 alt="Author"
                 class="w-8 h-8 rounded-full">
            <div class="text-sm">
              <p class="font-medium text-gray-900">Michael Chen</p>
              <p class="text-gray-500 text-xs">Mar 12, 2024</p>
            </div>
          </div>

          <div class="flex items-center gap-3">
            <button 
                    @click="liked = !liked; likes = liked ? likes + 1 : likes - 1"
                    class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors">
              <ion-icon 
                        :name="liked ? 'heart' : 'heart-outline'" 
                        :class="liked ? 'text-red-500' : ''"
                        class="text-xl"></ion-icon>
              <span class="text-sm" x-text="likes"></span>
            </button>

            <button 
                    @click="bookmarked = !bookmarked"
                    class="text-gray-500 hover:text-blue-600 transition-colors">
              <ion-icon 
                        :name="bookmarked ? 'bookmark' : 'bookmark-outline'" 
                        :class="bookmarked ? 'text-blue-600' : ''"
                        class="text-xl"></ion-icon>
            </button>
          </div>
        </div>
      </div>
    </article>
  </div>
Comments (0)

No comments yet. Be the first!