UI Components – Metis Library

<section class="py-12">
  <div class="container px-4 mx-auto">
    <div class="flex flex-col max-w-sm mx-auto text-center">
      <a class="block mx-auto text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="my-12">
        <span class="text-sm text-blueGray-400">Sign Up</span>
        <h4 class="mb-6 text-3xl">Create an account</h4>
        <div class="flex -mx-3">
          <div class="flex w-1/2 px-3">
            <div class="flex w-full mb-4 px-4 bg-blueGray-50 rounded">
              <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="text" placeholder="First name">
            </div>
          </div>
          <div class="flex w-1/2 px-3">
            <div class="flex w-full mb-4 px-4 bg-blueGray-50 rounded">
              <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="text" placeholder="Last name">
            </div>
          </div>
        </div>
        <div class="flex mb-4 px-4 bg-blueGray-50 rounded">
          <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="email" placeholder="name@email.com">
          <svg class="h-6 w-6 ml-4 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<section class="relative py-20 bg-blue-600 overflow-hidden">
  <div class="relative container px-4 mx-auto z-10">
    <div class="flex flex-wrap justify-center items-center -mx-3">
      <div class="w-full lg:w-1/2 px-3 mb-8 text-center lg:text-left">
        <h2 class="text-3xl mb-4 text-white lg:text-4xl font-bold font-heading">
          <span>Lorem ipsum</span>
          <span class="text-blue-200">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="text-blueGray-200">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      </div>
      <div class="w-full lg:w-1/2 px-3">
        <div class="flex flex-wrap max-w-lg mx-auto">
          <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:ml-auto md:mr-6 bg-blue-600 border border-blue-500 rounded">
            <svg class="h-6 w-6 my-auto text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
            <input class="w-full pl-3 py-4 text-xs text-white placeholder-white font-semibold leading-none bg-blue-600 outline-none" type="text" placeholder="Type your e-mail">
          </div>
          <button class="w-full md:w-auto py-4 px-8 text-xs text-white text-blue-800 hover:text-white font-semibold leading-none border hover:border-blue-500 bg-white hover:bg-blue-600 rounded transition duration-300 ease-in-out" type="submit">Sign Up</button>
        </div>
      </div>
    </div>

<section>
  <div class="flex flex-wrap items-center md:h-screen">
    <div class="w-full md:w-1/2 px-4 py-16 md:py-0 order-1 md:order-0">
      <div class="max-w-lg ml-auto text-center md:text-left">
        <span class="text-4xl text-blue-600 font-bold font-heading">Error 404</span>
        <h2 class="mb-2 text-4xl font-bold font-heading">Something went wrong!</h2>
        <p class="mb-6 text-blueGray-400">Sorry, but we are unable to open this page.</p>
        <div><a class="block sm:inline-block py-4 px-8 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Go back to Homepage</a><a class="block sm:inline-block py-4 px-8 text-xs text-blueGray-500 hover:text-blueGray-800 text-center font-semibold leading-none bg-blueGray-50 hover:bg-blueGray-100 rounded" href="#">Try Again</a></div>
      </div>
    </div>
    <div class="flex items-center order-0 md:order-1 w-full md:w-1/2 md:h-full py-12 md:py-0 px-20 md:px-0 bg-blue-600">
      <img class="mx-auto lg:max-w-lg" src="metis-assets/illustrations/error2.png" alt="">
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="pt-20 pb-16 mb-12 bg-cover bg-no-repeat rounded" style="background-image: url('https://images.unsplash.com/photo-1603665330306-dd1a67e0cc4e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1280&amp;q=80&amp;blend=fe8484&amp;sat=-80&amp;blend-mode=multiply')">
      <div class="max-w-2xl mx-auto">
        <div class="text-center mb-6">
          <span class="text-base md:text-lg">
            <a class="text-blueGray-200 hover:underline" href="#">CATEGORY</a>
            <span class="text-blueGray-200">24 Jan, 2020</span>
          </span>
          <h2 class="text-3xl md:text-5xl my-2 text-white font-bold font-heading">Curabitur vestibulum odio maximus ipsum</h2>
        </div>
        <div class="flex justify-center">
          <img class="w-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <div class="pl-4">
            <p class="text-blueGray-100 mb-1">Alice Bradley</p>
            <p class="text-xs text-blueGray-200 font-semibold">Author</p>
          </div>
        </div>
      </div>
    </div>
    <div class="max-w-2xl mx-auto">
      <p class="mb-6 leading-loose text-blueGray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo est eget consequat imperdiet. Suspendisse laoreet scelerisque lobortis. Mauris facilisis hendrerit nulla at vehicula. Suspendisse potenti. Ut in nulla a purus bibendum convallis. Suspendisse id nunc maximus, suscipit nte ac, vulputate massa. Sed ut nunc suscipit, bibendum arcu a, interdum elit. Nullam laoreet mollis dictum. Ut suscipit, magna at elementum iaculis, erat erat fermentum justo, sit amet ultrices enim leo sit amet purus. Nulla sed erat molestie, auctor mauris lobortis, iaculis justo.</p>
      <p class="leading-loose text-blueGray-400">Duis hendrerit dui in dui ornare luctus. Nullam gravida tincidunt lorem cursus suscipit. Integer scelerisque sem et sem porta, eu volutpat mi tempor. Duis interdum sodales lacus non tempor. Nam mattis, sapien a commodo ultrices, nunc orci tincidunt ante, tempus tempus turpis metus laoreet lacus. Praesent condimentum, arcu ut fringilla tincidunt, augue diam pretium augue, sit amet vestibulum nunc felis vel metus. Duis dolor nulla, pellentesque non ultrices ut, convallis eu felis. Duis luctus tempor arcu, vitae elementum massa porta non. Morbi aliquet, neque ut volutpat sodales, dui enim facilisis enim, ut dictum lacus neque in urna. Nam metus elit, ullamcorper pretium nisi at, aliquet gravida lectus. Nullam id lectus pellentesque, suscipit dolor eget, consequat velit. Pellentesque finibus commodo nisl, id interdum leo. Maecenas aliquam felis justo, ut sagittis nunc maximus ut.</p>
    </div>

<div class="fixed top-0 inset-x-0 bg-blueGray-800 text-white z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto pt-4 px-6 pb-6">
    <p class="font-bold font-heading">Cookie Policy</p>
    <p class="mt-3 mb-6 text-blueGray-200 text-sm">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the ‘how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
    <a x-on:click.prevent="open=false" class="inline-block py-3 px-6 mr-2 text-xs leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Accept Cookies</a><a x-on:click.prevent="open=false" class="inline-block py-3 px-6 text-xs leading-none border border-blue-500 hover:border-blue-400 hover:text-blueGray-200 rounded" href="#">Refuse Cookies</a>
  </div>
</div>

<section class="py-10 bg-blue-600">
  <div class="container px-4 mx-auto">
    <div class="flex max-w-md mx-auto flex-col text-center">
      <a class="block mx-auto text-3xl text-white font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis-light.svg" alt="" width="auto">
      </a>
      <div class="mt-12 mb-8 p-8 bg-white rounded">
        <span class="text-sm text-blueGray-400">Sign Up</span>
        <h4 class="mb-6 text-3xl">Create an account</h4>
        <div class="flex -mx-3">
          <div class="flex w-1/2 px-3">
            <div class="flex w-full mb-4 px-4 bg-blueGray-50 rounded">
              <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="text" placeholder="First name">
            </div>
          </div>
          <div class="flex w-1/2 px-3">
            <div class="flex w-full mb-4 px-4 bg-blueGray-50 rounded">
              <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="text" placeholder="Last name">
            </div>
          </div>
        </div>
        <div class="flex mb-4 px-4 bg-blueGray-50 rounded">
          <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="email" placeholder="name@email.com">
          <svg class="h-6 w-6 ml-4 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<section class="py-20 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="px-8 py-20 bg-white rounded shadow">
      <div class="max-w-xl mx-auto text-center">
        <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
          <span>Lorem ipsum</span>
          <span class="text-blue-600">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="mb-6 text-blueGray-400">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
        <div class="flex flex-wrap max-w-lg mx-auto">
          <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:mr-6 bg-blueGray-100 rounded">
            <svg class="h-6 w-6 my-auto text-blueGray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
            <input class="w-full pl-3 py-4 text-xs text-blueGray-400 font-semibold leading-none bg-blueGray-100 outline-none" type="text" placeholder="Type your e-mail">
          </div>
          <button class="w-full md:w-auto py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" type="submit">Sign Up</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-16 pb-20 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center mb-12">
      <div class="w-full lg:w-1/2 mb-6 lg:mb-0">
        <h2 class="text-4xl font-bold font-heading">
          <span>Make your</span>
          <span class="text-blue-600">life easier</span>
          <span>for marketing sales and customer support</span>
        </h2>
      </div>
      <div class="w-full lg:w-1/2">
        <p class="lg:pl-16 text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet consectetur adipisicing. Dolor sit amet consectetur adipisicing elit. Aliquid harum ducimus adipisci animi quidem nesciunt similique ex enim accusantium voluptate. Consectetur adipisicing harum ducimus adipisci.</p>
      </div>
    </div>
    <div class="flex flex-wrap -mx-3 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="pt-8 px-6 pb-6 bg-white text-center rounded shadow">
          <svg class="w-10 h-10 mx-auto mb-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
          </svg>
          <h3 class="mb-2 font-bold font-heading">Category Example</h3>
          <p class="text-sm text-blueGray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-12">
      <div class="text-center mb-6">
        <span class="text-base md:text-lg">
          <a class="text-blue-500 hover:underline" href="#">CATEGORY</a>
          <span class="text-blueGray-400">24 Jan, 2020</span>
        </span>
        <h2 class="text-4xl md:text-5xl my-2 font-bold font-heading">Curabitur vestibulum odio maximus ipsum</h2>
      </div>
      <div class="flex justify-center">
        <img class="w-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        <div class="pl-4">
          <p class="text-blueGray-500 mb-1">Alice Bradley</p>
          <p class="text-xs text-blue-600 font-semibold">Author</p>
        </div>
      </div>
    </div>
    <div class="mb-8">
      <img class="h-80 mx-auto mb-6 object-cover rounded" src="https://images.unsplash.com/photo-1603665330306-dd1a67e0cc4e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;h=300&amp;q=80&amp;blend=fe8484&amp;sat=-80&amp;blend-mode=multiply" alt="">
      <p class="text-sm text-center text-blueGray-400">Photo by <a class="text-blue-500" href="#">Paweł Czerwiński</a> on <a class="text-blue-500" href="#">Unsplash</a></p>
    </div>
    <div class="max-w-2xl mx-auto">
      <p class="mb-6 leading-loose text-blueGray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo est eget consequat imperdiet. Suspendisse laoreet scelerisque lobortis. Mauris facilisis hendrerit nulla at vehicula. Suspendisse potenti. Ut in nulla a purus bibendum convallis. Suspendisse id nunc maximus, suscipit nte ac, vulputate massa. Sed ut nunc suscipit, bibendum arcu a, interdum elit. Nullam laoreet mollis dictum. Ut suscipit, magna at elementum iaculis, erat erat fermentum justo, sit amet ultrices enim leo sit amet purus. Nulla sed erat molestie, auctor mauris lobortis, iaculis justo.</p>

<section class="py-10 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex max-w-md mx-auto flex-col text-center">
      <a class="block mx-auto text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="mt-12 mb-8 p-8 bg-white rounded shadow">
        <span class="text-sm text-blueGray-400">Sign Up</span>
        <h4 class="mb-6 text-3xl">Create an account</h4>
        <div class="flex -mx-3">
          <div class="flex w-1/2 px-3">
            <div class="flex w-full mb-4 px-4 bg-blueGray-50 rounded">
              <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="text" placeholder="First name">
            </div>
          </div>
          <div class="flex w-1/2 px-3">
            <div class="flex w-full mb-4 px-4 bg-blueGray-50 rounded">
              <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="text" placeholder="Last name">
            </div>
          </div>
        </div>
        <div class="flex mb-4 px-4 bg-blueGray-50 rounded">
          <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="email" placeholder="name@email.com">
          <svg class="h-6 w-6 ml-4 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<section class="py-20" x-data="{ activeSlide: 1 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:flex-nowrap">
      <div class="flex lg:flex-col w-full lg:w-auto justify-center items-center mb-2 lg:mr-16">
        <button class="inline-block rounded-full bg-blue-600 h-2 w-2 mb-2" :class="{ 'bg-blueGray-200': activeSlide != 1, 'bg-blue-600': activeSlide == 1 }" x-on:click="activeSlide=1"></button>
        <button class="inline-block rounded-full bg-blueGray-200 h-2 w-2 mb-2" :class="{ 'bg-blueGray-200': activeSlide != 2, 'bg-blue-600': activeSlide == 2 }" x-on:click="activeSlide=2"></button>
        <button class="inline-block rounded-full bg-blueGray-200 h-2 w-2" :class="{ 'bg-blueGray-200': activeSlide != 3, 'bg-blue-600': activeSlide == 3 }" x-on:click="activeSlide=3"></button>
      </div>
      <div class="flex flex-wrap lg:max-w-sm mx-auto">
        <div class="w-1/2 md:w-1/3 lg:w-full mb-4" :class="{ 'opacity-50': activeSlide!=1 }">
          <div class="pt-10 pb-8 px-6 bg-white text-center rounded shadow" :class="{ 'shadow': activeSlide==1 }">
            <svg class="w-10 h-10 mx-auto mb-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
            </svg>
            <h3 class="mb-2 font-bold font-heading">Category Example</h3>
            <p class="text-sm text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-full mb-4" :class="{ 'opacity-50': activeSlide!=2 }">
          <div class="pt-10 pb-8 px-6 bg-white text-center rounded" :class="{ 'shadow': activeSlide==2 }">
            <svg class="w-10 h-10 mx-auto mb-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path>
            </svg>
            <h3 class="mb-2 font-bold font-heading">Category Example</h3>

<section class="py-20 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="px-8 py-20 bg-white rounded shadow">
      <div class="flex flex-wrap justify-center items-center -mx-3">
        <div class="w-full lg:w-1/2 px-3 lg:px-16 mb-8 text-center lg:text-left">
          <h2 class="text-3xl mb-4 lg:text-4xl font-bold font-heading">
            <span>Lorem ipsum</span>
            <span class="text-blue-600">dolor sit</span>
            <span>amet, consectetur adipiscing.</span>
          </h2>
          <p class="text-blueGray-400">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
        </div>
        <div class="w-full lg:w-1/2 px-3">
          <div class="flex flex-wrap max-w-lg mx-auto">
            <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:mr-6 bg-blueGray-100 rounded">
              <svg class="h-6 w-6 my-auto text-blueGray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
              </svg>
              <input class="w-full pl-3 py-4 text-xs text-blueGray-400 font-semibold leading-none bg-blueGray-100 outline-none" type="text" placeholder="Type your e-mail">
            </div>
            <button class="w-full md:w-auto py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" type="submit">Sign Up</button>
          </div>
        </div>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="px-8 py-20 bg-blue-600 rounded shadow">
      <div class="text-center max-w-xl mx-auto">
        <h2 class="mb-4 text-3xl lg:text-4xl text-white font-bold font-heading">
          <span>Lorem ipsum</span>
          <span class="text-blue-200">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="mb-8 text-blueGray-200">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
        <div class="flex flex-wrap max-w-lg mx-auto">
          <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:mr-6 bg-blue-600 border border-blue-500 rounded">
            <svg class="h-6 w-6 my-auto text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
            <input class="w-full pl-3 py-4 text-xs text-white placeholder-white font-semibold leading-none bg-blue-600 outline-none" type="text" placeholder="Type your e-mail">
          </div>
          <button class="w-full md:w-auto py-4 px-8 text-xs text-white text-blue-800 hover:text-white font-semibold leading-none border hover:border-blue-500 bg-white hover:bg-blue-600 rounded transition duration-300 ease-in-out" type="submit">Sign Up</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-20 pb-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/4 mb-12 px-3">
        <div class="text-center">
          <span class="inline-block p-5 mb-6 bg-blue-600 text-white rounded-full">
            <svg class="w-12 h-12" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
          </span>
          <h4 class="mb-3 text-lg font-semibold font-heading">Category Example</h4>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 mb-12 px-3">
        <div class="text-center">
          <span class="inline-block p-5 mb-6 bg-blue-600 text-white rounded-full">
            <svg class="h-12 w-12" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2zM10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 5a.5.5 0 11-1 0 .5.5 0 011 0z"></path>
            </svg>
          </span>
          <h4 class="mb-3 text-lg font-semibold font-heading">Category Example</h4>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>

<section class="pt-20 pb-12 md:pb-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-8 md:mb-12">
        <div class="flex items-start">
          <div class="mr-6 p-3 bg-blue-600 rounded-full text-white">
            <svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
          </div>
          <div class="mt-4">
            <h3 class="mb-3 text-xl font-semibold font-heading">Easy to customize</h3>
            <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-8 md:mb-12">
        <div class="flex items-start">
          <div class="mr-6 p-3 bg-blue-600 rounded-full text-white">
            <svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
            </svg>
          </div>
          <div class="mt-4">

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="px-8 py-20 bg-blue-600 rounded shadow">
      <div class="flex flex-wrap justify-center items-center -mx-3">
        <div class="w-full lg:w-1/2 px-3 lg:px-16 mb-8 text-center lg:text-left">
          <h2 class="text-3xl mb-4 text-white lg:text-4xl font-bold font-heading">
            <span>Lorem ipsum</span>
            <span class="text-blue-200">dolor sit</span>
            <span>amet, consectetur adipiscing.</span>
          </h2>
          <p class="text-blueGray-200">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
        </div>
        <div class="w-full lg:w-1/2 px-3">
          <div class="flex flex-wrap max-w-lg mx-auto">
            <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:mr-6 bg-blue-600 border border-blue-500 rounded">
              <svg class="h-6 w-6 my-auto text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
              </svg>
              <input class="w-full pl-3 py-4 text-xs text-white placeholder-white font-semibold leading-none bg-blue-600 outline-none" type="text" placeholder="Type your e-mail">
            </div>
            <button class="w-full md:w-auto py-4 px-8 text-xs text-white text-blue-800 hover:text-white font-semibold leading-none border hover:border-blue-500 bg-white hover:bg-blue-600 rounded transition duration-300 ease-in-out" type="submit">Sign Up</button>
          </div>
        </div>

<section class="py-20 bg-blueGray-800">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <h2 class="mb-4 text-3xl lg:text-4xl text-white font-bold font-heading">
        <span>Lorem ipsum</span>
        <span class="text-blue-600">dolor sit</span>
        <span>amet, consectetur adipiscing.</span>
      </h2>
      <p class="mb-8 text-blueGray-500">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      <div class="flex flex-wrap max-w-lg mx-auto">
        <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:mr-6 bg-blueGray-800 border border-blueGray-500 rounded">
          <svg class="h-6 w-6 my-auto text-blueGray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
          </svg>
          <input class="w-full pl-3 px-3 py-4 text-xs text-white placeholder-white font-semibold bg-blueGray-800 outline-none" type="text" placeholder="Type your e-mail">
        </div>
        <button class="w-full md:w-auto py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" type="submit">Sign Up</button>
      </div>
    </div>
  </div>
</section>

<section class="pt-20 pb-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/3 mb-12 md:mb-16 px-3">
        <div class="max-w-md lg:max-w-xs">
          <span class="inline-block text-xs py-1 px-3 text-blue-600 font-semibold bg-blue-100 rounded-xl">Lorem Ipsum</span>
          <h2 class="mt-3 text-3xl md:text-4xl text-blueGray-900 font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
        </div>
      </div>
      <div class="flex flex-wrap w-full lg:w-2/3 px-3">
        <div class="w-full md:w-1/2 px-3 mb-12">
          <div class="flex flex-col items-start">
            <div class="p-3 bg-blue-600 rounded-full text-white">
              <svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
            </div>
            <div class="mt-6">
              <h3 class="mb-3 text-xl font-semibold font-heading">Easy to customize</h3>
              <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-3 mb-12">

<section class="py-20 bg-blueGray-800">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center items-center -mx-3">
      <div class="w-full lg:w-1/2 px-3 mb-8 text-center lg:text-left">
        <h2 class="text-3xl mb-4 lg:text-4xl text-white font-bold font-heading">
          <span>Lorem ipsum</span>
          <span class="text-blue-600">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="text-blueGray-500">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      </div>
      <div class="w-full lg:w-1/2 px-3">
        <div class="flex flex-wrap max-w-lg mx-auto">
          <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:mr-6 bg-blueGray-800 border border-blueGray-500 rounded">
            <svg class="h-6 w-6 my-auto text-blueGray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
            <input class="w-full pl-3 px-3 py-4 text-xs text-white placeholder-white font-semibold bg-blueGray-800 outline-none" type="text" placeholder="Type your e-mail">
          </div>
          <button class="w-full md:w-auto py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" type="submit">Sign Up</button>
        </div>
      </div>
    </div>

<section class="pt-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto mb-16 text-center">
      <h2 class="mb-4 text-4xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-1/2 lg:w-1/4 px-3 mb-20">
        <img class="w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-4" src="metis-assets/icons/set2/advertisement.png" alt="">
        <h3 class="sm:text-2xl font-bold font-heading text-center">Weekly Sales</h3>
      </div>
      <div class="w-1/2 lg:w-1/4 px-3 mb-20">
        <img class="w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-4" src="metis-assets/icons/set2/analytics.png" alt="">
        <h3 class="sm:text-2xl font-bold font-heading text-center">General Analytics</h3>
      </div>
      <div class="w-1/2 lg:w-1/4 px-3 mb-20">
        <img class="w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-4" src="metis-assets/icons/set2/hourglass.png" alt="">
        <h3 class="sm:text-2xl font-bold font-heading text-center">Saving your time</h3>
      </div>
      <div class="w-1/2 lg:w-1/4 px-3 mb-20">
        <img class="w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-4" src="metis-assets/icons/set2/calculation.png" alt="">
        <h3 class="sm:text-2xl font-bold font-heading text-center">Calculations</h3>
      </div>
      <div class="w-1/2 lg:w-1/4 px-3 mb-20">