<template>
  <header class="rounded-md flex flex-col-reverse bg-gray-100 my-16 py-10 px-8 justify-between md:flex-row md:items-center dark:bg-gray-800">
    <div class="sm:w-8/12">
        <div class="space-y-px">
          <div class="text-2xl font-semibold text-gray-900 sm:text-3xl md:text-4xl dark:text-gray-100">
            <h1>Michael Thomas</h1>
            <h1><span class="text-blue-600 dark:text-blue-600">Full-stack</span> web developer</h1>
          </div>

          <p class="text-gray-800 dark:text-gray-200">
            Hi there! I'm Michael Thomas, a web developer and systems engineer from Columbia, South Carolina.
            I build complex web apps using <a target="_blank" href="https://vuejs.org/">Vue.js</a>,
            <a target="_blank" href="https://nuxtjs.org/">Nuxt.js</a> and <a target="_blank" href="https://tailwindcss.com/">TailwindCSS</a>.
          </p>
        </div>
    </div>


  </header>
</template>
