<div class="max-w-sm w-1/2 lg:max-w-full lg:flex m-auto mt-10 shadow-md">
  <div class="h-48 lg:h-auto lg:w-48 flex-none background-pattern rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"  title="Woman holding a mug">
  </div>
  <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r py-4 px-6 flex flex-col justify-between leading-normal">
    <div class="mb-8">
      <div class="text-gray-900 font-bold text-xl mb-2">What is writing?</div>
      <p class="text-xs text-gray-600 items-center mb-1">
        Chapter 1
      </p>
      <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div>
      <p><a class="block w-full text-center font-bold bg-orange-300 float-right text-sm text-orange-900 px-3 py-2 rounded-full" href="#">Show</a></p>
    </div>
  </div>
</div>
<div class="max-w-sm w-1/2 lg:max-w-full lg:flex m-auto mt-10 shadow-md">
  <div class="h-48 lg:h-auto lg:w-48 flex-none background-pattern rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"  title="Woman holding a mug">
  </div>
  <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r py-4 px-6 flex flex-col justify-between leading-normal">
    <div class="mb-8">
      <div class="text-gray-900 font-bold text-xl mb-2">Let yourself go with freewriting</div>
      <p class="text-xs text-gray-600 items-center mb-1">
        Chapter 2
      </p>
      <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div>
      <p><a class="block w-full text-center font-bold bg-orange-300 float-right text-sm text-orange-900 px-3 py-2 rounded-full" href="#">Show</a></p>
    </div>
  </div>
</div>

<h2 class="font-bold text-3xl w-1/2 m-auto text-center mt-6 border-b-4">Extras</h2>
<div class="max-w-sm w-1/2 lg:max-w-full lg:flex m-auto mt-10 shadow-md">
  <div class="h-48 lg:h-auto lg:w-48 flex-none background-pattern rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"  title="Woman holding a mug">
  </div>
  <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r py-4 px-6 flex flex-col justify-between leading-normal">
    <div class="mb-8">
      <div class="text-gray-900 font-bold text-xl mb-2">Jeor Don Gramus?</div>
      <p class="text-xs text-gray-600 items-center mb-1">
        Character
      </p>
      <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div>
      <p><a class="block w-full text-center font-bold bg-orange-300 float-right text-sm text-orange-900 px-3 py-2 rounded-full" href="#">Show</a></p>
    </div>
  </div>
</div>
<div class="max-w-sm w-1/2 lg:max-w-full lg:flex m-auto mt-10 shadow-md">
  <div class="h-48 lg:h-auto lg:w-48 flex-none background-pattern rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"  title="Woman holding a mug">
  </div>
  <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r py-4 px-6 flex flex-col justify-between leading-normal">
    <div class="mb-8">
      <div class="text-gray-900 font-bold text-xl mb-2">Writing excercies</div>
      <p class="text-xs text-gray-600 items-center mb-1">
        Reading notes
      </p>
      <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div>
      <p><a class="block w-full text-center font-bold bg-orange-300 float-right text-sm text-orange-900 px-3 py-2 rounded-full" href="#">Show</a></p>
    </div>
  </div>
</div>
<div class="max-w-sm w-1/2 lg:max-w-full lg:flex m-auto mt-10 shadow-md">
  <div class="h-48 lg:h-auto lg:w-48 flex-none background-pattern rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"  title="Woman holding a mug">
  </div>
  <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r py-4 px-6 flex flex-col justify-between leading-normal">
    <div class="mb-8">
      <div class="text-gray-900 font-bold text-xl mb-2">Can coffee make you a better developer?</div>
      <p class="text-xs text-gray-600 items-center mb-1">
        Chapter
      </p>
      <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div>
      <p><a class="block w-full text-center font-bold bg-orange-300 float-right text-sm text-orange-900 px-3 py-2 rounded-full" href="#">Show</a></p>
    </div>
  </div>
</div>