I basically have multiple blocks. Around 8. Each has a slightly different design. but all the same html. How can I structure the code so that I can change the h2/button design, but use the same html structure?
<div>
<h1></h1>
<button></button>
</div>
Tailwind is a Utility-First CSS framework. In traditional CSS frameworks you would probably want to create classes for each of your blocks, named .introduction-block .sales-block .whatever-block. However, in Tailwind you generally try to avoid writing custom CSS classes and instead use the provided utility classes when possible. So for your problem I would suggest that you simply apply these utility classes and modify your blocks where needed, e.g.
<div class="bg-red-200 px-10">
<h1 class="text-lg font-bold">Headline 1</h1>
<div>Some simple text without class here.</div>
</div>
<div class="bg-blue-200 px-10">
<h1 class="text-lg font-bold">Headline 2</h1>
<div class="italic">Some italic text.</div>
</div>
<div class="bg-purple-800 px-10 text-gray-200 ">
<h1 class="text-lg font-bold">Headline 3</h1>
<div class="text-sm">The last block</div>
</div>
I suggest that you have a look at their documentation, it's honestly one of the best I've ever read.
You could certainly also make use of JavaScript frameworks like Vue3 in combination with Tailwind to create components for each of your blocks and reuse them to avoid code duplication in the HTML (for example define a BlockComponent which always has the structure div>h1+div and then style them according to some passed properties).
I know this was quite a generic answer but I hope it helps anyway.