Headings

<div class="w-full">
    <div class="mb-12 flex flex-wrap -mx-4 justify-center">
       <div class="px-4 relative w-full lg:w-8/12 text-center">
          <h6 class="mb-2 text-lg font-bold uppercase text-emerald-500">Marvel vs DC comics</h6>
          <h2 class="text-4xl font-bold mt-0 mb-1 text-blueGray-700">An old question from the ages</h2>
          <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">I don't know which question is harder 'Marvel or DC comics, which one is better?', or 'Which one was first, the egg, or the chicken?'. Maybe we'll never find out!</p>
       </div>
    </div>
 </div>

<div class="w-full">
    <div class="flex flex-wrap -mx-4 justify-center">
       <div class="px-4 relative w-full text-center">
          <span class="text-indigo-500 bg-indigo-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Comic books</span>
          <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">Why you should start reading them</h2>
          <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">First, I was afraid, you could actually say I was petrified about them. I kept thinking, how could I do this to myself, how could I make myself read them.</p>
       </div>
    </div>
 </div>

<div class="w-full">
    <div class="mb-12 flex flex-wrap -mx-4 justify-start">
       <div class="px-4 relative w-full lg:w-8/12 text-left">
          <h6 class="mb-2 font-bold uppercase text-pink-500">Autobots vs Decepticons</h6>
          <h3 class="text-3xl font-bold mt-3 mb-1 text-blueGray-700">You may need an Autobot in your life</h3>
          <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">I always felt like I could be a Decepticon. Like their name's saying, they are good at deception. But then, I thought they are bad, and maybe I would be better as an Autobot instead.</p>
       </div>
    </div>
 </div>

<div class="w-full">
    <div class="mb-12 flex flex-wrap -mx-4 justify-start">
       <div class="px-4 relative w-full lg:w-8/12 text-left">
          <span class="text-teal-500 bg-teal-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Transformers</span>
          <h3 class="text-3xl font-bold mt-3 mb-1 text-blueGray-700">Is you car a Transformer?</h3>
          <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-500">This question has been daunting me for ages. What if my new Bugatti that I have woken up in, is actually a Transformer, and what should I do in this case?</p>
       </div>
    </div>
 </div>