Components : Responsive Article Layout with Sidebar and Comments

Preview content adapted to proportion

Responsive Article Layout with Sidebar and Comments

Blog

This layout is ideal for content-heavy websites, blogs, or news platforms where organizing articles and user interactions is essential.

The component displays a sidebar with categories, a main content area featuring article cards, and a comments section with nested comments.

Users can navigate through categories in the sidebar, engage with article cards by liking or sharing, and interact with comments by replying.


The design adjusts to different screen sizes using CSS grid and flexbox, with the sidebar being sticky on larger screens and the article grid reformatting based on viewport width.

Date : June 11, 2025
Views : 29
Copys : 0

fa-tags

News websites Blog platforms Content hubs Online magazines

Code

<div class="max-w-4xl mx-auto space-y-8 md:space-y-10">
 <!-- Main Content -->
 <div class="flex-1 space-y-8">
  <!-- Article Grid -->
  <div class="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 xl:gap-8 lg:gap-6 md:gap-4">
   <!-- Article Card -->
   <article class="relative p-6 bg-white rounded-3xl shadow-md hover:shadow-lg transition-shadow duration-300 hover:scale-105 transform-gpu">
    <div class="skeleton animate-pulse absolute inset-0 bg-gray-200 rounded-3xl opacity-0">
    </div>
    <div class="space-y-4">
     <div class="flex items-center justify-between text-sm text-[#2D3748]">
      <time class="flex items-center">
       ? 2024-03-20
      </time>
      <span class="bg-[#EDF2F7] px-2 py-1 rounded-full">
       5 min read
      </span>
     </div>
     <h2 class="text-xl font-bold text-[#2D3748]">
      Modern Web Development Trends
     </h2>
     <div class="h-32 bg-gradient-to-r from-[#E55497] to-[#6B48FF] rounded-lg flex items-center justify-center text-4xl">
      ?
     </div>
     <div class="flex gap-2 justify-end">
      <button aria-label="Like article" class="px-4 py-2 bg-[#FF6B35] text-white rounded-lg hover:bg-[#FF5A1F] active:scale-95 transition-all duration-300">
       ❤️ 42
      </button>
      <button aria-label="Share article" class="px-4 py-2 bg-[#2D3748] text-white rounded-lg hover:bg-[#1A202C] active:scale-95 transition-all duration-300">
       ↗️ Share
      </button>
     </div>
    </div>
   </article>
  </div>
  <!-- Comments Section -->
  <div class="p-6 bg-white rounded-3xl shadow-md space-y-6">
   <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold text-[#2D3748]">
     ? Comments
     <span class="bg-[#FF6B35] text-white px-2 py-1 rounded-full">
      15
     </span>
    </h3>
   </div>
   <!-- Comment Thread -->
   <div class="space-y-4">
    <div class="flex gap-4">
     <div class="w-10 h-10 rounded-full bg-[#EDF2F7] flex items-center justify-center">
      ?
     </div>
     <div class="flex-1">
      <div class="p-4 bg-[#EDF2F7] rounded-xl">
       <div class="flex items-center gap-2 text-sm text-[#2D3748]">
        <span class="font-semibold">
         Sarah
        </span>
        <span>
         · 2h ago
        </span>
       </div>
       <p class="mt-2 text-[#2D3748]">
        Great insights! Really appreciate the detailed analysis.
       </p>
       <button aria-label="Reply to comment" class="mt-2 text-[#FF6B35] hover:text-[#FF5A1F] transition-colors duration-200">
        ↩ Reply
       </button>
      </div>
      <!-- Nested Comment -->
      <div class="ml-8 mt-4 border-l-2 border-[#EDF2F7] pl-4">
       <div class="flex gap-4">
        <div class="w-8 h-8 rounded-full bg-[#EDF2F7] flex items-center justify-center">
         ?
        </div>
        <div class="flex-1">
         <div class="p-3 bg-white border border-[#EDF2F7] rounded-lg">
          <div class="flex items-center gap-2 text-xs text-[#2D3748]">
           <span class="font-semibold">
            Mike
           </span>
           <span>
            · 1h ago
           </span>
          </div>
          <p class="mt-1 text-sm text-[#2D3748]">
           Totally agree with your points!
          </p>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="max-w-4xl mx-auto space-y-8 md:space-y-10">
  <!-- Main Content -->
  <div class="flex-1 space-y-8">
   <!-- Article Grid -->
   <div class="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 xl:gap-8 lg:gap-6 md:gap-4">
    <!-- Article Card -->
    <article class="relative p-6 bg-white rounded-3xl shadow-md hover:shadow-lg transition-shadow duration-300 hover:scale-105 transform-gpu">
     <div class="skeleton animate-pulse absolute inset-0 bg-gray-200 rounded-3xl opacity-0">
     </div>
     <div class="space-y-4">
      <div class="flex items-center justify-between text-sm text-[#2D3748]">
       <time class="flex items-center">
        ? 2024-03-20
       </time>
       <span class="bg-[#EDF2F7] px-2 py-1 rounded-full">
        5 min read
       </span>
      </div>
      <h2 class="text-xl font-bold text-[#2D3748]">
       Modern Web Development Trends
      </h2>
      <div class="h-32 bg-gradient-to-r from-[#E55497] to-[#6B48FF] rounded-lg flex items-center justify-center text-4xl">
       ?
      </div>
      <div class="flex gap-2 justify-end">
       <button aria-label="Like article" class="px-4 py-2 bg-[#FF6B35] text-white rounded-lg hover:bg-[#FF5A1F] active:scale-95 transition-all duration-300">
        ❤️ 42
       </button>
       <button aria-label="Share article" class="px-4 py-2 bg-[#2D3748] text-white rounded-lg hover:bg-[#1A202C] active:scale-95 transition-all duration-300">
        ↗️ Share
       </button>
      </div>
     </div>
    </article>
   </div>
   <!-- Comments Section -->
   <div class="p-6 bg-white rounded-3xl shadow-md space-y-6">
    <div class="flex items-center justify-between">
     <h3 class="text-lg font-semibold text-[#2D3748]">
      ? Comments
      <span class="bg-[#FF6B35] text-white px-2 py-1 rounded-full">
       15
      </span>
     </h3>
    </div>
    <!-- Comment Thread -->
    <div class="space-y-4">
     <div class="flex gap-4">
      <div class="w-10 h-10 rounded-full bg-[#EDF2F7] flex items-center justify-center">
       ?
      </div>
      <div class="flex-1">
       <div class="p-4 bg-[#EDF2F7] rounded-xl">
        <div class="flex items-center gap-2 text-sm text-[#2D3748]">
         <span class="font-semibold">
          Sarah
         </span>
         <span>
          · 2h ago
         </span>
        </div>
        <p class="mt-2 text-[#2D3748]">
         Great insights! Really appreciate the detailed analysis.
        </p>
        <button aria-label="Reply to comment" class="mt-2 text-[#FF6B35] hover:text-[#FF5A1F] transition-colors duration-200">
         ↩ Reply
        </button>
       </div>
       <!-- Nested Comment -->
       <div class="ml-8 mt-4 border-l-2 border-[#EDF2F7] pl-4">
        <div class="flex gap-4">
         <div class="w-8 h-8 rounded-full bg-[#EDF2F7] flex items-center justify-center">
          ?
         </div>
         <div class="flex-1">
          <div class="p-3 bg-white border border-[#EDF2F7] rounded-lg">
           <div class="flex items-center gap-2 text-xs text-[#2D3748]">
            <span class="font-semibold">
             Mike
            </span>
            <span>
             · 1h ago
            </span>
           </div>
           <p class="mt-1 text-sm text-[#2D3748]">
            Totally agree with your points!
           </p>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyBlogComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyBlogComponent = () => {
    return (
<div>
<div class="max-w-4xl mx-auto space-y-8 md:space-y-10">
 <!-- Main Content -->
 <div class="flex-1 space-y-8">
  <!-- Article Grid -->
  <div class="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 xl:gap-8 lg:gap-6 md:gap-4">
   <!-- Article Card -->
   <article class="relative p-6 bg-white rounded-3xl shadow-md hover:shadow-lg transition-shadow duration-300 hover:scale-105 transform-gpu">
    <div class="skeleton animate-pulse absolute inset-0 bg-gray-200 rounded-3xl opacity-0">
    </div>
    <div class="space-y-4">
     <div class="flex items-center justify-between text-sm text-[#2D3748]">
      <time class="flex items-center">
       ? 2024-03-20
      </time>
      <span class="bg-[#EDF2F7] px-2 py-1 rounded-full">
       5 min read
      </span>
     </div>
     <h2 class="text-xl font-bold text-[#2D3748]">
      Modern Web Development Trends
     </h2>
     <div class="h-32 bg-gradient-to-r from-[#E55497] to-[#6B48FF] rounded-lg flex items-center justify-center text-4xl">
      ?
     </div>
     <div class="flex gap-2 justify-end">
      <button aria-label="Like article" class="px-4 py-2 bg-[#FF6B35] text-white rounded-lg hover:bg-[#FF5A1F] active:scale-95 transition-all duration-300">
       ❤️ 42
      </button>
      <button aria-label="Share article" class="px-4 py-2 bg-[#2D3748] text-white rounded-lg hover:bg-[#1A202C] active:scale-95 transition-all duration-300">
       ↗️ Share
      </button>
     </div>
    </div>
   </article>
  </div>
  <!-- Comments Section -->
  <div class="p-6 bg-white rounded-3xl shadow-md space-y-6">
   <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold text-[#2D3748]">
     ? Comments
     <span class="bg-[#FF6B35] text-white px-2 py-1 rounded-full">
      15
     </span>
    </h3>
   </div>
   <!-- Comment Thread -->
   <div class="space-y-4">
    <div class="flex gap-4">
     <div class="w-10 h-10 rounded-full bg-[#EDF2F7] flex items-center justify-center">
      ?
     </div>
     <div class="flex-1">
      <div class="p-4 bg-[#EDF2F7] rounded-xl">
       <div class="flex items-center gap-2 text-sm text-[#2D3748]">
        <span class="font-semibold">
         Sarah
        </span>
        <span>
         · 2h ago
        </span>
       </div>
       <p class="mt-2 text-[#2D3748]">
        Great insights! Really appreciate the detailed analysis.
       </p>
       <button aria-label="Reply to comment" class="mt-2 text-[#FF6B35] hover:text-[#FF5A1F] transition-colors duration-200">
        ↩ Reply
       </button>
      </div>
      <!-- Nested Comment -->
      <div class="ml-8 mt-4 border-l-2 border-[#EDF2F7] pl-4">
       <div class="flex gap-4">
        <div class="w-8 h-8 rounded-full bg-[#EDF2F7] flex items-center justify-center">
         ?
        </div>
        <div class="flex-1">
         <div class="p-3 bg-white border border-[#EDF2F7] rounded-lg">
          <div class="flex items-center gap-2 text-xs text-[#2D3748]">
           <span class="font-semibold">
            Mike
           </span>
           <span>
            · 1h ago
           </span>
          </div>
          <p class="mt-1 text-sm text-[#2D3748]">
           Totally agree with your points!
          </p>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

</div>
    )
}
export default MyBlogComponent;

Recommended Related Components

More+

Article Card Component

The component is designed for use in blog posts, news articles, or any platform where articles need to be presented in an organized and engaging manner.

65
0

Article List Component

Suitable for blog posts, news feeds, or any content aggregation where articles need to be presented in a structured manner.

43
0

Responsive Article Layout with Sidebar and Comments

This layout is ideal for content-heavy websites, blogs, or news platforms where organizing articles and user interactions is essential.

29
0