index.html

---
layout: default
---

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-gray-50 bg-gradient-to-b from-gray-50 to-white overflow-hidden">
  <div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full" aria-hidden="true">
    <div class="relative h-full max-w-7xl mx-auto">
      <svg class="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
        <defs>
          <pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="404" height="784" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
      </svg>
      <svg class="absolute left-full transform -translate-y-3/4 -translate-x-1/4 md:-translate-y-1/2 lg:-translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
        <defs>
          <pattern id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="404" height="784" fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)" />
      </svg>
    </div>
  </div>

  <div class="relative pt-6 pb-16 sm:pb-24">
    <div class="mt-8 mx-auto max-w-7xl px-4 sm:mt-24">
      <div class="text-center">
        <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
          <span class="block xl:inline">You must</span>
          <span class="block text-indigo-600 xl:inline">read these books</span>
        </h1>
        <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
          You are here because you want to be magnificent. These books will start you on the journey. Choose the one that speaks to you.
        </p>
      </div>
    </div>
    <div class="mt-8 mx-auto max-w-4xl px4 sm:mt-24">
      <div class="flex flex-col space-y-16">
        {% for book in site.books %}
          <div class="flex flex-col sm:flex-row items-center sm:items-start px-4">
            <div class="w-full sm:w-1/3 text-center">
              <a class="inline-block mx-auto" href="{{ book.amazon }}">
                <img class="w-full sm:w-48 shadow-md" src="img/{{ book.image }}">
              </a>
            </div>
            <div class="w-full mt-8 sm:mt-0 sm:w-2/3 sm:pl-8">
              <h2 class="text-3xl font-bold">
                {{ book.title }}
              </h2>
              <h3 class="font-semibold text-xl mt-4 text-gray-700">{{ book.author }}</h3>
              <p class="text-gray-900 mt-2">{{ book.content | markdownify }}</p>
              <p class="mt-4"><a class="text-indigo-500 hover:text-indigo-900 hover:underline" href="{{ book.amazon }}">View "{{ book.title }}" on Amazon</a></p>
            </div>
          </div>
        {% endfor %}        
      </div>
    </div>
  </div>
</div>
<!-- This example requires Tailwind CSS v2.0+ -->
<footer class="bg-white">
  <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
    <div class="flex justify-center space-x-6 md:order-2">

    </div>
    <div class="mt-8 md:mt-0 md:order-1">
      <p class="text-center text-base text-gray-400">
        &copy; 2013 Integrum Technologies
      </p>
    </div>
  </div>
</footer>