nav.flex.items-center.justify-between.flex-wrap.bg-blue-500.p-6
  .flex.items-center.flex-shrink-0.text-white.mr-6
    svg.fill-current.h-8.w-8.mr-2(width='54', height='54', viewBox='0 0 54 54', xmlns='http://www.w3.org/2000/svg')
      path(d='M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z')
    span.font-semibold.text-xl.tracking-tight Menu
  .block(class='lg:hidden')
    button.flex.items-center.px-3.py-2.border.rounded.text-white.border-white(class='hover:text-white hover:border-white')
      svg.fill-current.h-3.w-3(viewBox='0 0 20 20', xmlns='http://www.w3.org/2000/svg')
        title Menu
        path(d='M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z')
  .w-full.block.flex-grow(class='lg:flex lg:items-center lg:w-auto')
    .text-sm(class='lg:flex-grow')
      a.block.mt-4.text-white.mr-4(href='#responsive-header', class='lg:inline-block lg:mt-0')
        | Docs
      a.block.mt-4.text-white.mr-4(href='#responsive-header', class='lg:inline-block lg:mt-0')
        | Examples
      a.block.mt-4.text-white(href='#responsive-header', class='lg:inline-block lg:mt-0')
        | Blog
    div
      a.inline-block.text-sm.px-4.py-2.leading-none.border.border-solid.border-white.rounded.text-white.mt-4(href='#', class='hover:border-transparent hover:text-blue-500 hover:bg-white lg:mt-0') Download

.my-12.mx-auto.px-4(class='md:px-12')
  .flex.flex-wrap.-mx-1(class='lg:-mx-4')
    each val in [1, 2, 3]
      .my-1.px-1.w-full(class='md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3')
        article.overflow-hidden.rounded-lg.shadow-lg
          a(href='#')
            img.block.h-auto.w-full(alt='Placeholder' class="hover:opacity-75" src='https://picsum.photos/id/1033/600/400')
          header.flex.items-center.justify-between.leading-tight.p-2(class='md:p-4')
            h1.text-lg
              a.no-underline.text-purple-900(class='hover:opacity-75' href='#')
                | News title #{val}
            p.text-purple-800.text-sm
              | 10/12/19
          .flex.items-center.justify-between.leading-none.px-4.py-2
            a.flex.items-center.no-underline.text-black(class='hover:underline' href='#')
              img.block.rounded-full(alt='Placeholder' src='https://picsum.photos/32/32/?random')
              p.ml-2.text-sm
                | Author name
            a.no-underline.text-gray-500(class='hover:text-red-600' href='#')
              i.fa.fa-heart
          footer.p-2(class="md:px-4")
            p.pb-3.text-gray-700.leading-normal Lorem ipsum dolor sit, amet consectetur adipisicing elit...
            .pb-4
              span.inline-block.bg-gray-200.rounded-full.px-3.py-1.text-xs.font-semibold.text-gray-700.mr-2.mb-2 #photography
              span.inline-block.bg-gray-200.rounded-full.px-3.py-1.text-xs.font-semibold.text-gray-700.mr-2.mb-2 #travel
              span.inline-block.bg-gray-200.rounded-full.px-3.py-1.text-xs.font-semibold.text-gray-700.mb-2 #winter
              
section.container.mx-auto.px-6.p-10
  h2.text-4xl.font-bold.text-center.text-gray-800.mb-8
    | Features
  .flex.items-center.flex-wrap.mb-20
    .w-full(class='md:w-1/2')
      h4.text-3xl.text-gray-800.font-bold.mb-3
        | Exercise Metrics
      p.text-gray-600.mb-8.leading-normal
        | Our Smart Health Monitoring Wristwatch is able to capture you vitals while you exercise. You can create different category of exercises and can track your vitals on the go.
    .w-full(class='md:w-1/2')
      img(src='https://www.dropbox.com/s/mimcvn6zxtoruis/health.svg?raw=1', alt='Monitoring')
  .flex.items-center.flex-wrap.mb-20
    .w-full(class='md:w-1/2')
      img(src='https://www.dropbox.com/s/hllo2ueo8zgi2tt/report.svg?raw=1', alt='Reporting')
    .w-full.pl-10(class='md:w-1/2')
      h4.text-3xl.text-gray-800.font-bold.mb-3
        | Reporting
      p.text-gray-600.mb-8.leading-normal
        | Our Smart Health Monitoring Wristwatch can generate a comprehensive report on your vitals depending on your settings either daily, weekly, monthly, quarterly or yearly.
  .flex.items-center.flex-wrap.mb-20
    .w-full(class='md:w-1/2')
      h4.text-3xl.text-gray-800.font-bold.mb-3
        | Syncing
      p.text-gray-600.mb-8.leading-normal
        | Our Smart Health Monitoring Wristwatch allows you to sync data across all your mobile devices whether iOS, Android or Windows OS and also to your laptop whether MacOS, GNU/LInux or Windows OS.
    .w-full(class='md:w-1/2')
      img(src='https://www.dropbox.com/s/v0x0ywlvgmw04z6/sync.svg?raw=1', alt='Syncing')

footer.bg-gray-900.text-white.pt-12.pb-8.px-4
  .mx-auto.px-4.container.overflow-hidden.flex.flex-col.justify-between(class='lg:flex-row')
    a.block.mr-4(href='/', class='w-1/3')
      h3.ml-4.text-5xl Ahihi
    .block.text-sm.mt-6(class='w-2/3 sm:flex lg:mt-0')
      ul.text-gray-700.list-none.p-0.font-thin.flex.flex-col.text-left.w-full
        li.inline-block.py-2.px-3.text-white.uppercase.font-medium.tracking-wide Product
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') Features
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') Integrations
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') Pricing
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') FAQ
      ul.text-gray-700.list-none.p-0.font-thin.flex.flex-col.text-left.w-full
        li.inline-block.py-2.px-3.text-white.uppercase.font-medium.tracking-wide Company
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') Privacy
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') Terms of Service
      ul.text-gray-700.list-none.p-0.font-thin.flex.flex-col.text-left.w-full
        li.inline-block.py-2.px-3.text-white.uppercase.font-medium.tracking-wide Developers
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') Developer API
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') Documentation
        li
          a.inline-block.py-2.px-3.text-gray-500.no-underline(href='#', class='hover:text-white') Guides
      .text-gray-700.flex.flex-col.w-full
        .inline-block.py-2.px-3.text-white.uppercase.font-medium.tracking-wide Follow Us
        .flex.pl-4.justify-start.mt-2
          a.block.flex.items-center.text-gray-300.mr-6.no-underline(class='hover:text-white', href='#')
            i.fa.fa-facebook
          a.block.flex.items-center.text-gray-300.mr-6.no-underline(class='hover:text-white', href='#')
            i.fa.fa-twitter
          a.block.flex.items-center.text-gray-300.no-underline(class='hover:text-white', href='#')
            i.fa.fa-github
  .pt-4.mt-4.pt-6.text-gray-600.border-t.border-gray-800.text-center  © 2019 All rights reserved.