Build a Blog Prototype

In this tutorial, we will create a simple blog post layout using Placehold for the featured image and content.

1. The Featured Image

We start by adding a wide featured image at the top.

<img 
  src="https://placehold.harshsandhu.com/api/img?w=1200&h=400&bg=2d2d2d&fg=666" 
  class="w-full h-auto rounded-lg mb-8" 
  alt="Featured Image" 
/>

2. The Content

For the content, we'll fetch HTML formatted paragraphs.

// Example using React/Next.js
async function BlogContent() {
  const res = await fetch('https://placehold.harshsandhu.com/api/lorem?units=paragraphs&count=5&format=html');
  const html = await res.text();
  
  return (
    <div className="prose dark:prose-invert" dangerouslySetInnerHTML={{ __html: html }} />
  );
}

3. Putting it together

Combine these elements to flesh out your UI without writing a single dummy word yourself!