Beautiful, responsive news components built with TailwindCSS and AlpineJS. Perfect for news articles, blog posts, and content cards.
A clean, modern news card with image, title, excerpt, and metadata for displaying news articles.
Scientists have made a groundbreaking discovery that could revolutionize the way we think about technology and innovation in the coming years.
<article class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-shadow group">
<div class="aspect-[16/10] bg-gray-200 overflow-hidden">
<img src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=250&fit=crop" alt="Breaking News" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center gap-2 mb-3">
<span class="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full">Breaking</span>
<span class="text-sm text-gray-500">2 hours ago</span>
</div>
<h3 class="text-xl font-bold mb-3 leading-tight group-hover:text-purple-600 transition-colors">Major Tech Breakthrough Announced Today</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4">Scientists have made a groundbreaking discovery that could revolutionize the way we think about technology and innovation in the coming years.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<span class="text-purple-600 text-sm font-bold">N</span>
</div>
<span class="text-sm text-gray-700">News Corp</span>
</div>
<button class="text-purple-600 hover:text-purple-500 text-sm font-medium transition-colors">
Read More →
</button>
</div>
</div>
</article><template>
<article class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-shadow group">
<div class="aspect-[16/10] bg-gray-200 overflow-hidden">
<img :src="article.image" :alt="article.title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center gap-2 mb-3">
<span class="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full">Breaking</span>
<span class="text-sm text-gray-500">{{ article.timeAgo }}</span>
</div>
<h3 class="text-xl font-bold mb-3 leading-tight group-hover:text-purple-600 transition-colors">{{ article.title }}</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4">{{ article.excerpt }}</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<span class="text-purple-600 text-sm font-bold">{{ article.publisherInitial }}</span>
</div>
<span class="text-sm text-gray-700">{{ article.publisher }}</span>
</div>
<button class="text-purple-600 hover:text-purple-500 text-sm font-medium transition-colors">
Read More →
</button>
</div>
</div>
</article>
</template>
<script setup>
import { ref } from 'vue';
const article = ref({
image: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=250&fit=crop',
title: 'Major Tech Breakthrough Announced Today',
excerpt: 'Scientists have made a groundbreaking discovery that could revolutionize the way we think about technology and innovation in the coming years.',
timeAgo: '2 hours ago',
publisher: 'News Corp',
publisherInitial: 'N'
});
</script>import React from 'react';
export default function NewsCard({ article }) {
return (
<article className="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-shadow group">
<div className="aspect-[16/10] bg-gray-200 overflow-hidden">
<img
src={article.image}
alt={article.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="p-6">
<div className="flex items-center gap-2 mb-3">
<span className="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full">Breaking</span>
<span className="text-sm text-gray-500">{article.timeAgo}</span>
</div>
<h3 className="text-xl font-bold mb-3 leading-tight group-hover:text-purple-600 transition-colors">{article.title}</h3>
<p className="text-gray-600 text-sm leading-relaxed mb-4">{article.excerpt}</p>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<span className="text-purple-600 text-sm font-bold">{article.publisherInitial}</span>
</div>
<span className="text-sm text-gray-700">{article.publisher}</span>
</div>
<button className="text-purple-600 hover:text-purple-500 text-sm font-medium transition-colors">
Read More →
</button>
</div>
</div>
</article>
);
}
// Usage example:
const article = {
image: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=250&fit=crop',
title: 'Major Tech Breakthrough Announced Today',
excerpt: 'Scientists have made a groundbreaking discovery that could revolutionize the way we think about technology and innovation in the coming years.',
timeAgo: '2 hours ago',
publisher: 'News Corp',
publisherInitial: 'N'
};
<NewsCard article={article} />A horizontal news list item with thumbnail, perfect for news feeds and article listings.
Learn how to structure your React applications for scalability and maintainability with modern patterns and techniques.
Sarah Chen
Senior Developer
<article class="flex flex-col sm:flex-row gap-4 p-4 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow group">
<div class="sm:w-48 w-full flex-shrink-0">
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-gray-200">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=300&h=200&fit=crop" alt="News thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-3 mb-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Technology</span>
<span class="text-sm text-gray-500">3 hours ago</span>
<span class="text-sm text-gray-400">•</span>
<span class="text-sm text-gray-500">5 min read</span>
</div>
<h3 class="text-lg font-bold mb-2 group-hover:text-purple-600 transition-colors leading-tight">Building Scalable React Applications: Best Practices</h3>
<p class="text-gray-600 text-sm mb-3 leading-relaxed">Learn how to structure your React applications for scalability and maintainability with modern patterns and techniques.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face" alt="Author" class="w-8 h-8 rounded-full ring-2 ring-white shadow-sm">
<div>
<p class="text-sm font-medium text-gray-900">Sarah Chen</p>
<p class="text-xs text-gray-500">Senior Developer</p>
</div>
</div>
<button class="text-purple-600 hover:text-purple-500 text-sm font-medium transition-colors">
Read More →
</button>
</div>
</div>
</article><template>
<article class="flex flex-col sm:flex-row gap-4 p-4 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow group">
<div class="sm:w-48 w-full flex-shrink-0">
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-gray-200">
<img :src="article.thumbnail" :alt="article.title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-3 mb-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ article.category }}</span>
<span class="text-sm text-gray-500">{{ article.timeAgo }}</span>
<span class="text-sm text-gray-400">•</span>
<span class="text-sm text-gray-500">{{ article.readTime }} min read</span>
</div>
<h3 class="text-lg font-bold mb-2 group-hover:text-purple-600 transition-colors leading-tight">{{ article.title }}</h3>
<p class="text-gray-600 text-sm mb-3 leading-relaxed">{{ article.excerpt }}</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img :src="article.author.avatar" :alt="article.author.name" class="w-8 h-8 rounded-full ring-2 ring-white shadow-sm">
<div>
<p class="text-sm font-medium text-gray-900">{{ article.author.name }}</p>
<p class="text-xs text-gray-500">{{ article.author.role }}</p>
</div>
</div>
<button class="text-purple-600 hover:text-purple-500 text-sm font-medium transition-colors">
Read More →
</button>
</div>
</div>
</article>
</template>
<script setup>
import { ref } from 'vue';
const article = ref({
thumbnail: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=300&h=200&fit=crop',
title: 'Building Scalable React Applications: Best Practices',
excerpt: 'Learn how to structure your React applications for scalability and maintainability with modern patterns and techniques.',
category: 'Technology',
timeAgo: '3 hours ago',
readTime: '5',
author: {
name: 'Sarah Chen',
role: 'Senior Developer',
avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face'
}
});
</script>import React from 'react';
export default function NewsListItem({ article }) {
return (
<article className="flex flex-col sm:flex-row gap-4 p-4 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow group">
<div className="sm:w-48 w-full flex-shrink-0">
<div className="aspect-[4/3] rounded-lg overflow-hidden bg-gray-200">
<img
src={article.thumbnail}
alt={article.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
{article.category}
</span>
<span className="text-sm text-gray-500">{article.timeAgo}</span>
<span className="text-sm text-gray-400">•</span>
<span className="text-sm text-gray-500">{article.readTime} min read</span>
</div>
<h3 className="text-lg font-bold mb-2 group-hover:text-purple-600 transition-colors leading-tight">
{article.title}
</h3>
<p className="text-gray-600 text-sm mb-3 leading-relaxed">
{article.excerpt}
</p>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<img
src={article.author.avatar}
alt={article.author.name}
className="w-8 h-8 rounded-full ring-2 ring-white shadow-sm"
/>
<div>
<p className="text-sm font-medium text-gray-900">{article.author.name}</p>
<p className="text-xs text-gray-500">{article.author.role}</p>
</div>
</div>
<button className="text-purple-600 hover:text-purple-500 text-sm font-medium transition-colors">
Read More →
</button>
</div>
</div>
</article>
);
}
// Usage example:
const article = {
thumbnail: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=300&h=200&fit=crop',
title: 'Building Scalable React Applications: Best Practices',
excerpt: 'Learn how to structure your React applications for scalability and maintainability with modern patterns and techniques.',
category: 'Technology',
timeAgo: '3 hours ago',
readTime: '5',
author: {
name: 'Sarah Chen',
role: 'Senior Developer',
avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face'
}
};
<NewsListItem article={article} />A large, prominent news card with overlay content, perfect for featured articles and hero sections.
Explore how artificial intelligence is reshaping healthcare, finance, and creative industries with unprecedented speed and accuracy.
Emma Rodriguez
Tech Journalist
<article class="relative bg-gradient-to-br from-blue-600 to-purple-700 rounded-2xl overflow-hidden shadow-2xl group hover:shadow-3xl transition-all duration-500">
<div class="relative aspect-[21/9]">
<img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=800&h=400&fit=crop" alt="Featured article" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-purple-900/40 to-transparent"></div>
<div class="absolute inset-0 p-8 flex flex-col justify-end">
<div class="text-white max-w-2xl">
<div class="flex items-center gap-3 mb-4">
<span class="inline-block bg-gradient-to-r from-orange-400 to-pink-500 text-white text-sm px-4 py-1 rounded-full font-bold shadow-lg">Trending</span>
<span class="text-sm opacity-90 bg-black/20 px-3 py-1 rounded-full">12 min read</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-3 leading-tight drop-shadow-lg">Revolutionary AI Breakthroughs Transforming Industries</h2>
<p class="text-lg mb-6 opacity-90 leading-relaxed">Explore how artificial intelligence is reshaping healthcare, finance, and creative industries with unprecedented speed and accuracy.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face" alt="Author" class="w-10 h-10 rounded-full border-2 border-white shadow-lg">
<div>
<p class="font-semibold">Emma Rodriguez</p>
<p class="text-sm opacity-75">Tech Journalist</p>
</div>
</div>
<button class="bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 border-2 border-white/20">
Explore Now
</button>
</div>
</div>
</div>
</div>
</article><template>
<article class="relative bg-gradient-to-br from-blue-600 to-purple-700 rounded-2xl overflow-hidden shadow-2xl group hover:shadow-3xl transition-all duration-500">
<div class="relative aspect-[21/9]">
<img :src="featuredArticle.image" :alt="featuredArticle.title" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-purple-900/40 to-transparent"></div>
<div class="absolute inset-0 p-8 flex flex-col justify-end">
<div class="text-white max-w-2xl">
<div class="flex items-center gap-3 mb-4">
<span class="inline-block bg-gradient-to-r from-orange-400 to-pink-500 text-white text-sm px-4 py-1 rounded-full font-bold shadow-lg">{{ featuredArticle.badge }}</span>
<span class="text-sm opacity-90 bg-black/20 px-3 py-1 rounded-full">{{ featuredArticle.readTime }} min read</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-3 leading-tight drop-shadow-lg">{{ featuredArticle.title }}</h2>
<p class="text-lg mb-6 opacity-90 leading-relaxed">{{ featuredArticle.excerpt }}</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img :src="featuredArticle.author.avatar" :alt="featuredArticle.author.name" class="w-10 h-10 rounded-full border-2 border-white shadow-lg">
<div>
<p class="font-semibold">{{ featuredArticle.author.name }}</p>
<p class="text-sm opacity-75">{{ featuredArticle.author.role }}</p>
</div>
</div>
<button class="bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 border-2 border-white/20">
Explore Now
</button>
</div>
</div>
</div>
</div>
</article>
</template>
<script setup>
import { ref } from 'vue';
const featuredArticle = ref({
image: 'https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=800&h=400&fit=crop',
title: 'Revolutionary AI Breakthroughs Transforming Industries',
excerpt: 'Explore how artificial intelligence is reshaping healthcare, finance, and creative industries with unprecedented speed and accuracy.',
badge: 'Trending',
readTime: '12',
author: {
name: 'Emma Rodriguez',
role: 'Tech Journalist',
avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face'
}
});
</script>import React from 'react';
export default function FeaturedNewsCard({ article }) {
return (
<article className="relative bg-gradient-to-br from-blue-600 to-purple-700 rounded-2xl overflow-hidden shadow-2xl group hover:shadow-3xl transition-all duration-500">
<div className="relative aspect-[21/9]">
<img
src={article.image}
alt={article.title}
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-purple-900/40 to-transparent"></div>
<div className="absolute inset-0 p-8 flex flex-col justify-end">
<div className="text-white max-w-2xl">
<div className="flex items-center gap-3 mb-4">
<span className="inline-block bg-gradient-to-r from-orange-400 to-pink-500 text-white text-sm px-4 py-1 rounded-full font-bold shadow-lg">
{article.badge}
</span>
<span className="text-sm opacity-90 bg-black/20 px-3 py-1 rounded-full">{article.readTime} min read</span>
</div>
<h2 className="text-3xl md:text-4xl font-bold mb-3 leading-tight drop-shadow-lg">
{article.title}
</h2>
<p className="text-lg mb-6 opacity-90 leading-relaxed">
{article.excerpt}
</p>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<img
src={article.author.avatar}
alt={article.author.name}
className="w-10 h-10 rounded-full border-2 border-white shadow-lg"
/>
<div>
<p className="font-semibold">{article.author.name}</p>
<p className="text-sm opacity-75">{article.author.role}</p>
</div>
</div>
<button className="bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 border-2 border-white/20">
Explore Now
</button>
</div>
</div>
</div>
</div>
</article>
);
}
// Usage example:
const article = {
image: 'https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=800&h=400&fit=crop',
title: 'Revolutionary AI Breakthroughs Transforming Industries',
excerpt: 'Explore how artificial intelligence is reshaping healthcare, finance, and creative industries with unprecedented speed and accuracy.',
badge: 'Trending',
readTime: '12',
author: {
name: 'Emma Rodriguez',
role: 'Tech Journalist',
avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face'
}
};
<FeaturedNewsCard article={article} />A compact news card with minimal content, perfect for dense layouts and quick overviews.
<article class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
<div class="aspect-[16/9] bg-gray-200 overflow-hidden">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=225&fit=crop" alt="Compact news" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<div class="flex items-center gap-2 mb-2">
<span class="inline-block bg-green-500 text-white text-xs px-2 py-1 rounded-full font-medium">Business</span>
<span class="text-xs text-gray-500">1h ago</span>
</div>
<h3 class="text-sm font-bold mb-2 leading-tight group-hover:text-purple-600 transition-colors line-clamp-2">Market Trends Show Strong Recovery in Tech Sector</h3>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center">
<span class="text-purple-600 text-xs font-bold">M</span>
</div>
<span class="text-xs text-gray-600">Market Watch</span>
</div>
<button class="text-purple-600 hover:text-purple-500 text-xs font-medium transition-colors">
→
</button>
</div>
</div>
</article><template>
<article class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
<div class="aspect-[16/9] bg-gray-200 overflow-hidden">
<img :src="compactArticle.image" :alt="compactArticle.title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<div class="flex items-center gap-2 mb-2">
<span class="inline-block bg-green-500 text-white text-xs px-2 py-1 rounded-full font-medium">{{ compactArticle.category }}</span>
<span class="text-xs text-gray-500">{{ compactArticle.timeAgo }}</span>
</div>
<h3 class="text-sm font-bold mb-2 leading-tight group-hover:text-purple-600 transition-colors line-clamp-2">{{ compactArticle.title }}</h3>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center">
<span class="text-purple-600 text-xs font-bold">{{ compactArticle.publisherInitial }}</span>
</div>
<span class="text-xs text-gray-600">{{ compactArticle.publisher }}</span>
</div>
<button class="text-purple-600 hover:text-purple-500 text-xs font-medium transition-colors">
→
</button>
</div>
</div>
</article>
</template>
<script setup>
import { ref } from 'vue';
const compactArticle = ref({
image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=225&fit=crop',
title: 'Market Trends Show Strong Recovery in Tech Sector',
category: 'Business',
timeAgo: '1h ago',
publisher: 'Market Watch',
publisherInitial: 'M'
});
</script>import React from 'react';
export default function CompactNewsCard({ article }) {
return (
<article className="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
<div className="aspect-[16/9] bg-gray-200 overflow-hidden">
<img
src={article.image}
alt={article.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="p-4">
<div className="flex items-center gap-2 mb-2">
<span className="inline-block bg-green-500 text-white text-xs px-2 py-1 rounded-full font-medium">
{article.category}
</span>
<span className="text-xs text-gray-500">{article.timeAgo}</span>
</div>
<h3 className="text-sm font-bold mb-2 leading-tight group-hover:text-purple-600 transition-colors line-clamp-2">
{article.title}
</h3>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center">
<span className="text-purple-600 text-xs font-bold">{article.publisherInitial}</span>
</div>
<span className="text-xs text-gray-600">{article.publisher}</span>
</div>
<button className="text-purple-600 hover:text-purple-500 text-xs font-medium transition-colors">
→
</button>
</div>
</div>
</article>
);
}
// Usage example:
const article = {
image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=225&fit=crop',
title: 'Market Trends Show Strong Recovery in Tech Sector',
category: 'Business',
timeAgo: '1h ago',
publisher: 'Market Watch',
publisherInitial: 'M'
};
<CompactNewsCard article={article} />A horizontal news card with social media sharing buttons and engagement metrics for better user interaction.
Discover the latest tools and trends shaping the future of remote work and distributed teams. From AI-powered collaboration tools to innovative workspace designs.
Emma Rodriguez
Tech Journalist
<article class="flex flex-col lg:flex-row bg-white border border-gray-200 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 group">
<!-- Image Section -->
<div class="lg:w-2/5 w-full relative overflow-hidden">
<div class="aspect-[16/10] lg:aspect-[4/3] bg-gray-200">
<img src="https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=600&h=400&fit=crop" alt="News article" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<div class="absolute top-4 left-4">
<span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg">
Tech News
</span>
</div>
</div>
<!-- Content Section -->
<div class="lg:w-3/5 flex flex-col justify-between p-8">
<div>
<div class="flex items-center gap-4 mb-4">
<span class="text-sm text-gray-500">4 hours ago</span>
<span class="text-sm text-gray-400">•</span>
<span class="text-sm text-gray-500">8 min read</span>
</div>
<h3 class="text-2xl font-bold mb-4 leading-tight group-hover:text-purple-600 transition-colors">The Future of Remote Work: Tools and Trends</h3>
<p class="text-gray-600 text-base leading-relaxed mb-6">Discover the latest tools and trends shaping the future of remote work and distributed teams. From AI-powered collaboration tools to innovative workspace designs.</p>
<!-- Social Media & Engagement -->
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-6 text-sm text-gray-500">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span class="font-medium">24</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
<span class="font-medium">8</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
</svg>
<span class="font-medium">12</span>
</div>
</div>
</div>
</div>
<!-- Author & Social Share -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=48&h=48&fit=crop&crop=face" alt="Author" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<div>
<p class="font-semibold text-gray-900">Emma Rodriguez</p>
<p class="text-sm text-gray-500">Tech Journalist</p>
</div>
</div>
<div class="flex items-center gap-3">
<button class="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</button>
<button class="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</button>
<button class="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</button>
</div>
</div>
</div>
</article><template>
<article class="flex flex-col lg:flex-row bg-white border border-gray-200 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 group">
<!-- Image Section -->
<div class="lg:w-2/5 w-full relative overflow-hidden">
<div class="aspect-[16/10] lg:aspect-[4/3] bg-gray-200">
<img :src="socialArticle.image" :alt="socialArticle.title" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<div class="absolute top-4 left-4">
<span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg">
{{ socialArticle.category }}
</span>
</div>
</div>
<!-- Content Section -->
<div class="lg:w-3/5 flex flex-col justify-between p-8">
<div>
<div class="flex items-center gap-4 mb-4">
<span class="text-sm text-gray-500">{{ socialArticle.timeAgo }}</span>
<span class="text-sm text-gray-400">•</span>
<span class="text-sm text-gray-500">{{ socialArticle.readTime }} min read</span>
</div>
<h3 class="text-2xl font-bold mb-4 leading-tight group-hover:text-purple-600 transition-colors">{{ socialArticle.title }}</h3>
<p class="text-gray-600 text-base leading-relaxed mb-6">{{ socialArticle.excerpt }}</p>
<!-- Social Media & Engagement -->
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-6 text-sm text-gray-500">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span class="font-medium">{{ socialArticle.likes }}</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
<span class="font-medium">{{ socialArticle.comments }}</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
</svg>
<span class="font-medium">{{ socialArticle.shares }}</span>
</div>
</div>
</div>
</div>
<!-- Author & Social Share -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img :src="socialArticle.author.avatar" :alt="socialArticle.author.name" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<div>
<p class="font-semibold text-gray-900">{{ socialArticle.author.name }}</p>
<p class="text-sm text-gray-500">{{ socialArticle.author.role }}</p>
</div>
</div>
<div class="flex items-center gap-3">
<button @click="shareOnTwitter" class="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</button>
<button @click="shareOnFacebook" class="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</button>
<button @click="shareOnInstagram" class="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</button>
</div>
</div>
</div>
</article>
</template>
<script setup>
import { ref } from 'vue';
const socialArticle = ref({
image: 'https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=600&h=400&fit=crop',
title: 'The Future of Remote Work: Tools and Trends',
excerpt: 'Discover the latest tools and trends shaping the future of remote work and distributed teams. From AI-powered collaboration tools to innovative workspace designs.',
category: 'Tech News',
timeAgo: '4 hours ago',
readTime: '8',
likes: 24,
comments: 8,
shares: 12,
author: {
name: 'Emma Rodriguez',
role: 'Tech Journalist',
avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=48&h=48&fit=crop&crop=face'
}
});
const shareOnTwitter = () => {
// Twitter share logic
};
const shareOnFacebook = () => {
// Facebook share logic
};
const shareOnInstagram = () => {
// Instagram share logic
};
</script>import React from 'react';
export default function SocialNewsCard({ article }) {
const shareOnTwitter = () => {
// Twitter share logic
};
const shareOnFacebook = () => {
// Facebook share logic
};
const shareOnInstagram = () => {
// Instagram share logic
};
return (
<article className="flex flex-col lg:flex-row bg-white border border-gray-200 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 group">
<!-- Image Section -->
<div className="lg:w-2/5 w-full relative overflow-hidden">
<div className="aspect-[16/10] lg:aspect-[4/3] bg-gray-200">
<img
src={article.image}
alt={article.title}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
/>
</div>
<div className="absolute top-4 left-4">
<span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg">
{article.category}
</span>
</div>
</div>
<!-- Content Section -->
<div className="lg:w-3/5 flex flex-col justify-between p-8">
<div>
<div className="flex items-center gap-4 mb-4">
<span className="text-sm text-gray-500">{article.timeAgo}</span>
<span className="text-sm text-gray-400">•</span>
<span className="text-sm text-gray-500">{article.readTime} min read</span>
</div>
<h3 className="text-2xl font-bold mb-4 leading-tight group-hover:text-purple-600 transition-colors">
{article.title}
</h3>
<p className="text-gray-600 text-base leading-relaxed mb-6">
{article.excerpt}
</p>
<!-- Social Media & Engagement -->
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-6 text-sm text-gray-500">
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span className="font-medium">{article.likes}</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
<span className="font-medium">{article.comments}</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
</svg>
<span className="font-medium">{article.shares}</span>
</div>
</div>
</div>
</div>
<!-- Author & Social Share -->
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<img
src={article.author.avatar}
alt={article.author.name}
className="w-12 h-12 rounded-full border-2 border-white shadow-md"
/>
<div>
<p className="font-semibold text-gray-900">{article.author.name}</p>
<p className="text-sm text-gray-500">{article.author.role}</p>
</div>
</div>
<div className="flex items-center gap-3">
<button onClick={shareOnTwitter} className="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</button>
<button onClick={shareOnFacebook} className="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</button>
<button onClick={shareOnInstagram} className="w-10 h-10 bg-white border-2 border-gray-300 text-black rounded-full flex items-center justify-center hover:bg-gray-50 transition-all duration-300 hover:scale-110">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</button>
</div>
</div>
</div>
</article>
);
}
// Usage example:
const article = {
image: 'https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=600&h=400&fit=crop',
title: 'The Future of Remote Work: Tools and Trends',
excerpt: 'Discover the latest tools and trends shaping the future of remote work and distributed teams. From AI-powered collaboration tools to innovative workspace designs.',
category: 'Tech News',
timeAgo: '4 hours ago',
readTime: '8',
likes: 24,
comments: 8,
shares: 12,
author: {
name: 'Emma Rodriguez',
role: 'Tech Journalist',
avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=48&h=48&fit=crop&crop=face'
}
};
<SocialNewsCard article={article} />We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.