Content Display Components

Content Display Components Component

A simple and vibrant content display component with micro-interactions, responsive design, and dark theme support, suitable for blogs and content consumption. Uses picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
    <div class="relative">
      <img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
      <div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
        Article
      </div>
    </div>
    <div class="p-5">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
        The Future of Web Development
      </h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
        Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
      </p>
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
            <p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
          </div>
        </div>
        <a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
          Read More
          <svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>

Pastel3DBlogContentCard

A responsive Content Display Component for blogs or content sections, designed with Tailwind CSS. It features a simple layout with a 3D-inspired aesthetic using shadows and hover effects. The color scheme is soft pastel for light mode, with a compatible dark mode theme. The component includes an image, title, metadata (author/date), excerpt, and a 'Read More' button. Placeholder images are used from picsum.photos and randomuser.me.

Open Preview

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pastel 3D Blog Content Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // You can define specific pastel colors here if needed,
                        // but for this example, we primarily use Tailwind's default palette
                        // that offers pastel-like shades (e.g., sky-50, sky-100, sky-200).
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-sky-50 dark:bg-slate-900 font-sans">

    <div class="min-h-screen flex flex-col justify-center items-center p-4 sm:p-8">
        <div class="text-center mb-8">
            <h1 class="text-3xl sm:text-4xl font-bold text-slate-800 dark:text-white">Content Display Component</h1>
            <p class="text-slate-600 dark:text-slate-400">3D Design, Pastel Colors, Simple Complexity</p>
        </div>

        <article class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-out max-w-2xl w-full group">
            <!-- Image Section -->
            <div class="relative aspect-video overflow-hidden">
                <img src="https://picsum.photos/seed/contentcard3d/800/450" alt="Abstract tech background" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent"></div>
            </div>

            <!-- Content Section -->
            <div class="p-6 sm:p-8">
                <!-- Title -->
                <h2 class="text-2xl sm:text-3xl font-bold text-sky-600 dark:text-sky-300 mb-3 group-hover:text-sky-500 dark:group-hover:text-sky-200 transition-colors duration-300">
                    Exploring the Depths of 3D Web Design
                </h2>

                <!-- Meta Information -->
                <div class=

Retro Social Media Post Card

A responsive social media post card component with a retro/vintage 80s/90s aesthetic, using an analogous color scheme (Sky, Teal, Purple) with Fuchsia accents. Features dark mode support and interactive hover effects. Content includes user avatar, username, timestamp, text post, image, and action buttons (like, comment, share). Built with Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-stone-200 dark:bg-slate-900 py-8 flex items-center justify-center">
  <div class="max-w-xl w-full mx-auto p-1 bg-gradient-to-br from-fuchsia-500 via-purple-500 to-cyan-500 rounded-xl shadow-2xl">
    <div class="bg-stone-100 dark:bg-slate-800 rounded-lg p-6">
      <!-- Header -->
      <div class="flex items-center space-x-4 mb-6 pb-4 border-b-2 border-dashed border-sky-300 dark:border-sky-700">
        <img class="w-16 h-16 rounded-full border-4 border-fuchsia-500 dark:border-fuchsia-400 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-xl font-bold text-purple-600 dark:text-purple-400 hover:underline cursor-pointer">RetroGal92</p>
          <p class="text-sm text-slate-500 dark:text-slate-400">Posted 2 hours ago</p>
        </div>
        <div class="ml-auto">
           <svg class="w-6 h-6 text-slate-500 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-300 cursor-pointer transition-colors duration-150" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </div>
      </div>

      <!-- Content -->
      <div class="mb-6">
        <p class="text-slate-700 dark:text-slate-200 text-lg leading-relaxed mb-4">
          Just vibin' with these retro tunes! <span class="text-2xl">🎧</span> Anyone else remember mixtapes and oversized headphones? Good times! <span class="text-yellow-400">✨</span>
          <a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#RetroLife</a>
          <a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#90sKid</a>
        </p>
        <img class="w-full h-auto rounded-lg shadow-lg border-2 border-teal-500 dark:border-teal-400 object-cover" src="https://picsum.photos/seed/retroscene1/600/400" alt="Retro Scene">
      </div>

      <!-- Actions -->
      <div class="flex items-center justify-between text-slate-600 dark:text-slate-300">
        <button class="flex items-center space-x-2 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors duration-200 group">
          <svg class="w-6 h-6 group-hover:fill-current transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">1.2k Likes</span>
        </button>
        <button class="flex items-center space-x-2 hover:text-sky-600 dark:hover:text-sky-400 transition-colors duration-200 group">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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 group-hover:font-bold text-sm sm:text-base">87 Comments</span>
        </button>
        <button class="flex items-center space-x-2 hover:text-teal-600 dark:hover:text-teal-400 transition-colors duration-200 group">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4m0 0l-4 4m4-4v12"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">Share</span>
        </button>
      </div>
    </div>
  </div>
</div>

SimpleContentDisplay

A simple content display component with responsive design and dark theme support using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4 max-w-sm">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/123/400/300" alt="Placeholder image">
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Article Title</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">This is a brief description of the article content. It provides a sneak peek into what the user can expect to read.</p>
      <div class="flex items-center mt-4">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author avatar">
        <span class="text-gray-700 dark:text-gray-400 text-sm">John Doe</span>
      </div>
    </div>
  </div>
</div>

A responsive social media content display component designed in skeuomorphic style with pastel colors, featuring multiple interactive elements and dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <p class="text-gray-800 dark:text-gray-300 mb-4">This is an example of skeuomorphic design in a social media component. The layout mimics a real-world interaction device.</p>
    <img src="https://picsum.photos/400/200?random=1" alt="Content Image" class="rounded-lg mb-4 shadow-lg">
    <div class="flex justify-between items-center">
        <button class="bg-pink-300 dark:bg-pink-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-pink-400 dark:hover:bg-pink-500 transition">Like</button>
        <button class="bg-blue-300 dark:bg-blue-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-blue-400 dark:hover:bg-blue-500 transition">Comment</button>
        <button class="bg-green-300 dark:bg-green-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-green-400 dark:hover:bg-green-500 transition">Share</button>
    </div>
</div>