Here Are 6 Ways To Make A Blog Post With Tailwind CSS

<div class="bg-gray-100 rounded-lg py-2 px-4">
  <h1 class="text-2xl font-bold text-gray-700 mt-4 mb-4">Blog Post Title</h1>
  <p class="text-lg text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc id convallis tincidunt, urna nunc congue massa, in tristique velit elit vel nunc. Fusce vel dui auctor, vulputate libero a, hendrerit nisl. Sed et nulla euismod, efficitur elit vitae, ultricies mauris. Praesent euismod, nisi vel varius egestas, odio elit efficitur nulla, sed ultrices diam libero sed ipsum. Nullam euismod, purus vel gravida bibendum, mauris elit malesuada turpis, vel bibendum ex libero vel nunc. Sed vitae nulla quis sapien tristique commodo.</p>
  <p class="text-lg text-gray-600 leading-relaxed">Sed eget lobortis metus. Nulla facilisi. Sed et tortor euismod, elementum quam vel, posuere urna. Sed auctor, nunc id convallis tincidunt, urna nunc congue massa, in tristique velit elit vel nunc. Fusce vel dui auctor, vulputate libero a, hendrerit nisl. Sed et nulla euismod, efficitur elit vitae, ultricies mauris.</p>
</div>

.bg-gray-100 {
  background-color: #f7fafc;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.text-2xl {
  font-size: 2rem;
}

.font-bold {
  font-weight: 700;
}

.text-gray-700 {
  color: #4a5568;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-lg {
  font-size: 1.5rem;
}

.text-gray-600 {
  color: #718096;
}

.leading-relaxed {
  line-height: 1.625;
}

<div class="max-w-screen-lg mx-auto">
    <!-- header -->
    <header class="flex items-center justify-between py-2">
      <a href="#" class="px-2 lg:px-0 font-bold">
        Tech Blog
      </a>
      <button class="block md:hidden px-2 text-3xl">
        <i class='bx bx-menu'></i>
      </button>
      <ul class="hidden md:inline-flex items-center">
        <li class="px-2 md:px-4">
          <a href="" class="text-green-800 font-semibold hover:text-green-600"> Home </a>
        </li>
        <li class="px-2 md:px-4">
          <a href="" class="text-gray-500 font-semibold hover:text-green-600"> About </a>
        </li>
        <li class="px-2 md:px-4">
          <a href="" class="text-gray-500 font-semibold hover:text-green-600"> Press </a>
        </li>
        <li class="px-2 md:px-4">
          <a href="" class="text-gray-500 font-semibold hover:text-green-600"> Contact </a>
        </li>
        <li class="px-2 md:px-4 hidden md:block">
          <a href="" class="text-gray-500 font-semibold hover:text-green-600"> Login </a>
        </li>
        <li class="px-2 md:px-4 hidden md:block">
          <a href="" class="text-gray-500 font-semibold hover:text-green-600"> Register </a>
        </li>
      </ul>

    </header>
    <!-- header ends here -->

    <main class="mt-10">

      <div class="mb-4 md:mb-0 w-full mx-auto relative">
        <div class="px-4 lg:px-0">
          <h2 class="text-4xl font-semibold text-gray-800 leading-tight">
            Pellentesque a consectetur velit, ac molestie ipsum. Donec sodales, massa et auctor.
          </h2>
          <a 
            href="#"
            class="py-2 text-green-700 inline-flex items-center justify-center mb-2"
          >
            Cryptocurrency
          </a>
        </div>

        <img src="https://images.unsplash.com/photo-1587614387466-0a72ca909e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" class="w-full object-cover lg:rounded" style="height: 28em;"/>
      </div>

      <div class="flex flex-col lg:flex-row lg:space-x-12">

        <div class="px-4 lg:px-0 mt-12 text-gray-700 text-lg leading-relaxed w-full lg:w-3/4">
          <p class="pb-6">Advantage old had otherwise sincerity dependent additions. It in adapted natural hastily is
            justice. Six draw
            you him full not mean evil. Prepare garrets it expense windows shewing do an. She projection advantages
            resolution son indulgence. Part sure on no long life am at ever. In songs above he as drawn to. Gay was
            outlived peculiar rendered led six.</p>

          <p class="pb-6">Difficulty on insensible reasonable in. From as went he they. Preference themselves me as
            thoroughly
            partiality considered on in estimating. Middletons acceptance discovered projecting so is so or. In or
            attachment inquietude remarkably comparison at an. Is surrounded prosperous stimulated am me discretion
            expression. But truth being state can she china widow. Occasional preference fat remarkably now projecting
            uncommonly dissimilar. Sentiments projection particular companions interested do at my delightful. Listening
            newspaper in advantage frankness to concluded unwilling.</p>

          <p class="pb-6">Adieus except say barton put feebly favour him. Entreaties unpleasant sufficient few pianoforte
            discovered
            uncommonly ask. Morning cousins amongst in mr weather do neither. Warmth object matter course active law
            spring six. Pursuit showing tedious unknown winding see had man add. And park eyes too more him. Simple excuse
            active had son wholly coming number add. Though all excuse ladies rather regard assure yet. If feelings so
            prospect no as raptures quitting.</p>

          <div class="border-l-4 border-gray-500 pl-4 mb-6 italic rounded">
            Sportsman do offending supported extremity breakfast by listening. Decisively advantages nor
            expression
            unpleasing she led met. Estate was tended ten boy nearer seemed. As so seeing latter he should thirty whence.
            Steepest speaking up attended it as. Made neat an on be gave show snug tore.
          </div>

          <p class="pb-6">Exquisite cordially mr happiness of neglected distrusts. Boisterous impossible unaffected he me
            everything.
            Is fine loud deal an rent open give. Find upon and sent spot song son eyes. Do endeavor he differed carriage
            is learning my graceful. Feel plan know is he like on pure. See burst found sir met think hopes are marry
            among. Delightful remarkably new assistance saw literature mrs favourable.</p>

          <h2 class="text-2xl text-gray-800 font-semibold mb-4 mt-4">Uneasy barton seeing remark happen his has</h2>

          <p class="pb-6">Guest it he tears aware as. Make my no cold of need. He been past in by my hard. Warmly thrown
            oh he common
            future. Otherwise concealed favourite frankness on be at dashwoods defective at. Sympathize interested
            simplicity at do projecting increasing terminated. As edward settle limits at in.</p>

          <p class="pb-6">Dashwood contempt on mr unlocked resolved provided of of. Stanhill wondered it it welcomed oh.
            Hundred no
            prudent he however smiling at an offence. If earnestly extremity he he propriety something admitting convinced
            ye. Pleasant in to although as if differed horrible. Mirth his quick its set front enjoy hoped had there. Who
            connection imprudence middletons too but increasing celebrated principles joy. Herself too improve gay winding
            ask expense are compact. New all paid few hard pure she.</p>

          <p class="pb-6">Breakfast agreeable incommode departure it an. By ignorant at on wondered relation. Enough at
            tastes really
            so cousin am of. Extensive therefore supported by extremity of contented. Is pursuit compact demesne invited
            elderly be. View him she roof tell her case has sigh. Moreover is possible he admitted sociable concerns. By
            in cold no less been sent hard hill.</p>

          <p class="pb-6">Detract yet delight written farther his general. If in so bred at dare rose lose good. Feel and
            make two real
            miss use easy. Celebrated delightful an especially increasing instrument am. Indulgence contrasted sufficient
            to unpleasant in in insensible favourable. Latter remark hunted enough vulgar say man. Sitting hearted on it
            without me.</p>

        </div>

        <div class="w-full lg:w-1/4 m-auto mt-12 max-w-screen-sm">
          <div class="p-4 border-t border-b md:border md:rounded">
            <div class="flex py-2">
              <img src="https://randomuser.me/api/portraits/men/97.jpg"
                class="h-10 w-10 rounded-full mr-2 object-cover" />
              <div>
                <p class="font-semibold text-gray-700 text-sm"> Mike Sullivan </p>
                <p class="font-semibold text-gray-600 text-xs"> Editor </p>
              </div>
            </div>
            <p class="text-gray-700 py-3">
              Mike writes about technology
              Yourself required no at thoughts delicate landlord it be. Branched dashwood do is whatever it.
            </p>
            <button class="px-2 py-1 text-gray-100 bg-green-700 flex w-full items-center justify-center rounded">
              Follow 
              <i class='bx bx-user-plus ml-2' ></i>
            </button>
          </div>
        </div>

      </div>
    </main>
    <!-- main ends here -->

    <!-- footer -->
    <footer class="border-t mt-12 pt-12 pb-32 px-4 lg:px-0">
      <div> 
        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" class="h-12 w-12" alt="logo">
      </div>
      <div class="flex flex-wrap">
        <div class="w-full lg:w-2/5">
          <p class="text-gray-600 hidden lg:block mt-4 p-0 lg:pr-12">
            Boisterous he on understood attachment as entreaties ye devonshire. 
            In mile an form snug were been sell.
            Extremely ham any his departure for contained curiosity defective. 
            Way now instrument had eat diminution melancholy expression sentiments stimulated. 
          </p>
        </div>

        <div class="w-full mt-6 lg:mt-0 md:w-1/2 lg:w-1/5">
          <h6 class="font-semibold text-gray-700 mb-4">Company</h6>
          <ul>
            <li> <a href="" class="block text-gray-600 py-2">Team</a> </li>
            <li> <a href="" class="block text-gray-600 py-2">About us</a> </li>
            <li> <a href="" class="block text-gray-600 py-2">Press</a> </li>
          </ul>
        </div>

        <div class="w-full mt-6 lg:mt-0 md:w-1/2 lg:w-1/5">
          <h6 class="font-semibold text-gray-700 mb-4">Content</h6>
          <ul>
            <li> <a href="" class="block text-gray-600 py-2">Blog</a> </li>
            <li> <a href="" class="block text-gray-600 py-2">Privacy Policy</a> </li>
            <li> <a href="" class="block text-gray-600 py-2">Terms & Conditions</a> </li>
            <li> <a href="" class="block text-gray-600 py-2">Documentation</a> </li>
          </ul>
        </div>

        <div class="w-full mt-6 lg:mt-0 md:w-1/2 lg:w-1/5">
          <h6 class="font-semibold text-gray-700 mb-4">Company</h6>
          <ul>
            <li> <a href="" class="block text-gray-600 py-2">Team</a> </li>
            <li> <a href="" class="block text-gray-600 py-2">About us</a> </li>
            <li> <a href="" class="block text-gray-600 py-2">Press</a> </li>
          </ul>
        </div>

      </div>
    </footer>
  </div>