コンテンツ表示コンポーネント

マイクロインタラクション、レスポンシブデザイン、ダークテーマのサポートを備えたシンプルで鮮やかなコンテンツ表示コンポーネントで、ブログやコンテンツの消費に適しています。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

プレビューを開く

                <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>

Tailwind CSS で設計された、ブログやコンテンツセクション用のレスポンシブコンテンツ表示コンポーネント。シンプルなレイアウトで、シャドウやホバーエフェクトを使用した3Dにインスパイアされた美学が特徴です。配色はライトモード用のソフトパステル調で、互換性のあるダークモードのテーマがあります。このコンポーネントには、画像、タイトル、メタデータ(著者/日付)、抜粋、および「続きを読む」ボタンが含まれています。プレースホルダー画像は、picsum.photos と randomuser.me から使用されます。

プレビューを開く

                <!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=

レトロなソーシャルメディアポストカード

レトロ/ビンテージの80年代/90年代の美学を備えたレスポンシブなソーシャルメディアポストカードコンポーネントで、フューシャのアクセントが付いた類似の配色(スカイ、ティール、パープル)を使用しています。ダークモードのサポートとインタラクティブなホバー効果を備えています。コンテンツには、ユーザーのアバター、ユーザー名、タイムスタンプ、テキスト投稿、画像、アクションボタン(コメント、シェアなど)が含まれます。Tailwind CSSで構築されています。

プレビューを開く

                <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>

シンプルコンテンツディスプレイ

レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートを備えたシンプルなコンテンツ表示コンポーネント。

プレビューを開く

                <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>