<div class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-12 grid grid-cols-1">
    <div class="place-self-start">
      <div class="bg-white p-5 rounded-2xl rounded-tl-none">
        Hey, there! It's been a while!
      </div>
    </div>

    <div class="place-self-start text-left">
      <div class="bg-white p-5 rounded-2xl rounded-tl-none">
        Wanted to know if you wanted to get lunch sometime this week?
      </div>
    </div>

    <div class="place-self-start text-left">
      <div class="bg-white p-5 rounded-2xl rounded-tl-none">
        Or next week. I'm also free during the evenings next week.
      </div>
    </div>

    <div class="place-self-end text-right">
      <div class="bg-green-50 text-green-900 p-5 rounded-2xl rounded-tr-none">
        Oops! Sorry for the late response!
      </div>
    </div>

    <div class="place-self-end text-right">
      <div class="bg-green-50 text-green-900 p-5 rounded-2xl rounded-tr-none">
        I'd love to get lunch sometime next week!
      </div>
    </div>

    <div class="place-self-end text-right">
      <div class="bg-green-50 text-green-900 p-5 rounded-2xl rounded-tr-none">
        Do you have any places in mind where you'd want to meet?
      </div>
    </div>
  </div>
</div>

// No CSS here! All the magic happens with Tailwind!