インタラクティブコンポーネント

                <div class="dark:bg-gray-900 bg-gray-100 p-4 font-mono antialiased flex items-center justify-center min-h-screen">
  <div class="relative dark:bg-black bg-white border-2 border-black dark:border-white w-full max-w-sm mx-auto shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <div class="overflow-hidden border-b-2 border-black dark:border-white">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out hover:scale-105">
    </div>
    <div class="p-4 relative">
      <h3 class="text-xl dark:text-white text-black font-bold mb-2 uppercase">Product Title Here</h3>
      <p class="text-black dark:text-gray-300 text-sm mb-4">A short and punchy description of the product, highlighting its brutalist appeal.</p>
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl dark:text-white text-black font-extrabold">$99.99</span>
        <button class="bg-black dark:bg-white text-white dark:text-black uppercase text-sm py-2 px-4 border-2 border-black dark:border-white font-bold hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">Add to Cart</button>
      </div>
    </div>
    <div class="absolute -top-2 -right-2 bg-black dark:bg-white text-white dark:text-black px-2 py-1 text-xs font-bold uppercase border-2 border-black dark:border-white">New</div>
  </div>
</div>
              

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col lg:flex-row">
    <div class="flex-shrink-0 mb-4 lg:mb-0 lg:mr-4">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
    <div class="flex-1">
        <h2 class="text-white dark:text-gray-200 text-xl font-bold">John Doe</h2>
        <p class="text-gray-400 dark:text-gray-500 text-sm mb-2">@john_doe</p>
        <p class="text-gray-300 dark:text-gray-400 mb-4">Here’s a glimpse of my recent adventures! 🗺️</p>
        <img class="w-full h-64 object-cover rounded-lg mb-4" src="https://picsum.photos/800/400?random=1" alt="Adventure Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 dark:bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Like</button>
            <button class="bg-green-500 dark:bg-green-600 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Comment</button>
            <button class="bg-red-500 dark:bg-red-600 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
    </div>
</div>
              

                <div class="bg-gray-800 text-white p-8 rounded-lg shadow-lg">  <h1 class="text-3xl font-bold mb-6">My Portfolio</h1>  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Project 1">      <h2 class="text-xl font-semibold mt-2">Project Title 1</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Project 2">      <h2 class="text-xl font-semibold mt-2">Project Title 2</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Project 3">      <h2 class="text-xl font-semibold mt-2">Project Title 3</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>  </div>  <div class="mt-8 text-center">    <button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-500">Load More Projects</button>  </div></div>
              

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div class="text-gray-900 dark:text-white font-bold text-lg">John Doe</div>
  </div>
  <img class="w-full h-64 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum/800/400" alt="Post Image">
  <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample social media post with a pastel color scheme and Material Design styling.</p>
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-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 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.644 0-1.25-.302-1.63-0.8L10 14V10m4 0H5a2 2 0 00-2 2v6a2 2 0 002 2h10l2.293 2.293c.032.032.07.05.107.05h.1l.1-.147l.145-.194-.013-.014L17 21.5l.354-.354.353.354z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815F7.001 16.88C18.745 10.65 7.544 10.5 21 12z"></path></svg>
      <span>35 Comments</span>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <input type="text" class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Add a comment...">
    <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Post</button>
  </div>
</div>
              

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-6 lg:p-12 font-mono">

  <!-- Article Card with Brutalist Elements -->
  <div class="max-w-xl mx-auto bg-amber-700 dark:bg-amber-900 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000,12px_12px_0_0_#a16207] dark:shadow-[8px_8px_0_0_#fff,12px_12px_0_0_#44403c] transition duration-300 hover:shadow-[16px_16px_0_0_#000,20px_20px_0_0_#a16207] dark:hover:shadow-[16px_16px_0_0_#fff,20px_20px_0_0_#44403c]">
    <div class="p-6 border-b-4 border-black dark:border-white">
      <div class="text-sm font-bold mb-2 uppercase">Featured Article</div>
      <h2 class="text-3xl font-bold mb-4 leading-tight">The Unyielding Spirit of Brutalist Architecture</h2>
      <img src="https://picsum.photos/seed/brutalism/600/400" alt="Brutalist building" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <p class="mb-4">
        Exploring the raw beauty and controversial history of Brutalist structures. Their imposing forms and
        unadorned surfaces evoke a sense of permanence and honesty.
      </p>
      <a href="#" class="inline-block bg-black dark:bg-white text-white dark:text-black px-6 py-3 font-bold border-4 border-black dark:border-white transform translate-y-1 translate-x-1 hover:translate-y-0 hover:translate-x-0 transition duration-100">
        Read More
      </a>
    </div>

    <!-- Related Articles Section -->
    <div class="p-6 border-b-4 border-black dark:border-white">
      <h3 class="text-2xl font-bold mb-4">More to Explore</h3>
      <ul>
        <li class="mb-4 pb-4 border-b border-stone-700 dark:border-stone-300 last:border-b-0">
          <a href="#" class="block hover:underline">
            <h4 class="text-xl font-bold mb-1">Concrete Jungle: Brutalism in Urban Landscapes</h4>
            <p class="text-sm text-stone-700 dark:text-stone-300">An analysis of Brutalism
              

                <div class="bg-gray-100 dark:bg-gray-900 p-4">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
          </div>
        </div>
      </div>
      
       <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-blue-600 dark:text-blue-400">$12,345</p>
        <span class="text-green-500 dark:text-green-400">+5.2%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">New Users</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-purple-600 dark:text-purple-400">1,234</p>
        <span class="text-red-500 dark:text-red-400">-1.1%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 col-span-full">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Recent Activity</h2>
      <ul>
        <li class="flex items-center mb-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Purchased a product</p>
          </div>
        </li>
         <li class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Left a review</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
              

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=4" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=5" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=6" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About Me</h3>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Your Name</h4>
                <p class="text-gray-600 dark:text-gray-400">A short bio or description about yourself and your work.</p>
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 transition duration-300 ease-in-out">Contact Me</button>
</div>
              

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-4">Interactive Components</h2>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg shadow-inner p-4 mb-4">
        <h3 class="text-gray-300 text-lg font-semibold">User Posts</h3>
        <div class="flex items-center space-x-4 mb-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
            <div class="flex-1">
                <textarea rows="3" class="w-full p-2 bg-gray-600 dark:bg-gray-700 text-white rounded-md border border-gray-500 focus:border-gray-400 focus:outline-none" placeholder="What's on your mind?"></textarea>
                <div class="flex justify-between mt-2">
                    <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-4 rounded">Post</button>
                    <button class="text-gray-400 hover:text-gray-200 font-semibold">Cancel</button>
                </div>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md">
            <div class="flex items-start space-x-3 mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600" />
                <div class="flex-1">
                    <p class="text-gray-200 font-semibold">Jane Doe</p>
                    <p class="text-gray-400">Just had a great coffee!</p>
                    <img src="https://picsum.photos/200/100?random=1" alt="Post Image" class="mt-2 rounded-lg shadow-md" />
                    <div class="flex space-x-4 mt-2">
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4H5v-4zm0 0l4-4H5v4zm14-4l4 4h-4l4-4zm0 0l-4-4h4l-4 4z"/></svg>
                            Like
                        </button>
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8M8 14h3m6 5c1.042 0 1.932-.592 2.42-1.53a3.001 3.001 0 00-2.53-4.47c-.961 0-1.86.467-2.53 1.53-1.184 1.59-3.49 1.56-5.42.43-.758-.395-1.5-.87-2.5-1.43M9 21h6m-3-3.25l3.625-1.81a3.997 3.997 0 00-.676-7.376M15 19.25h-6m0 0l-.625 1.37M9 21l.365.734M11 20.25l3 1.25m-1-6v6m0-6s2 1.5 4 0m-4 0c-.5 0-.5-1 0-1.5s.5-1 1-1 2 0 2 0v1s-1.5 1.5-2 2c-1 0-1-1-1-1s-2 1 0 2c0 0 1 .5 2 0V19H9m1-2s-1 1-2 0m2 0c1.5 0 1.5 2 0 3c0 0-1-1 0-2z"/></svg>
                            Comment
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
              

                    
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg w-96">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
      <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
    </div>
    <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt Light Pink Product Image">
    <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here. It should be concise and informative.</p>
    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Add to Cart</button>
  </div>
</div>