Premium Tailwind CSS & React UI Components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<article class="group bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
  <div class="relative overflow-hidden aspect-[4/2]">
    <img src="image.jpg" alt="Article title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
    <div class="absolute top-4 left-4">
      <span class="bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm px-3 py-1 rounded-full text-gray-900 dark:text-white text-xs transition-colors duration-200">Technology</span>
    </div>
  </div>
  <div class="p-6">
    <h3 class="text-xl md:text-2xl font-semibold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">The Future of Modern Technology</h3>
    <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-2 transition-colors duration-200">Exploring the cutting-edge innovations that are shaping our digital landscape and transforming industries worldwide.</p>
    <div class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-700 transition-colors duration-200">
      <div class="flex items-center gap-2">
        <span class="text-gray-700 dark:text-gray-300 text-sm transition-colors duration-200">Sarah Mitchell</span>
      </div>
      <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm transition-colors duration-200">
        <time>5 min read</time>
      </div>
    </div>
  </div>
</article>