Currently HTML and TailwindCSS code is generated.
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Blockchain Project Title</div>
<div class="font-semibold text-gray-700 mb-2">Subtitle for the Project</div>
<div class="flex items-center mb-4">
<span class="text-yellow-500 mr-1">★</span>
<span class="text-yellow-500 mr-1">★</span>
<span class="text-yellow-500 mr-1">★</span>
<span class="text-yellow-500 mr-1">★</span>
<span class="text-gray-400">★</span>
</div>
<p class="text-gray-700 text-base">
This is an overview of the blockchain project, detailing its unique features, use cases, and the potential impact it aims to have in the Web3 ecosystem.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-blue-700 mr-2 mb-2">Blockchain</span>
<span class="inline-block bg-green-200 rounded-full px-3 py-1 text-sm font-semibold text-green-700 mr-2 mb-2">Web3</span>
</div>
</div>
<div class="bg-white shadow-md rounded-lg p-6 flex items-center">
<div class="flex-shrink-0">
<svg class="h-10 w-10 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a8 8 0 1 0 8 8A8.001 8.001 0 0 0 10 2zm0 14a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6z"/>
</svg>
</div>
<div class="ml-4">
<h2 class="text-2xl font-semibold text-gray-800">Statistic Title</h2>
<p class="text-3xl font-bold text-gray-900">123</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full h-48 object-cover" src="your-image-url.jpg" alt="Image Description">
<div class="p-4">
<h2 class="font-bold text-xl mb-2">Card Title</h2>
<p class="text-gray-700 text-base">This is some dynamic text that describes the content of the card. Feel free to customize it based on your needs.</p>
</div>
</div>