About

<header class="relative py-3 md:py-6 bg-white">
    <div class="container">
        <nav class="relative flex items-center justify-between">
            <a href="#" class="flex items-center hover:opacity-75 transition duration-150 ease-in-out">
                <img class="h-8 sm:h-10 w-auto mr-4" src="../../fractal.svg" alt="">
                <span class="text-xl md:text-2xl font-bold">Fractal</span>
            </a>

            <div class="-mr-2 flex items-center sm:hidden">
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Main menu">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>

            <div class="hidden sm:flex sm:space-x-10">

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">About</a>

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">GitHub</a>

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">Chat</a>

            </div>
        </nav>
    </div>
</header>

<main>

    <section class="bg-teal-200">
        <div class="grid md:grid-cols-2 items-center">

            <img src="../../pictures/feathers.jpg" alt="" loading="lazy" class="image w-full h-64 md:h-full md:w-auto object-cover" />

            <div class="py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
                <div class="container md:max-w-xl md:px-10 lg:px-12">
                    <h1 class="text-4xl tracking-tight leading-10 font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
                        Atoms.<br><span class="text-teal-600">Molecules.</span><br>Organisms.
                    </h1>

                    <p class="mt-3 text-lg sm:text-xl md:mt-5 md:max-w-3xl text-teal-500">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. In, qui, possimus natus autem a minus quaerat voluptate laboriosam, aut harum esse deserunt.
                    </p>

                </div>
            </div>
        </div>
    </section>

    <section class="section py-6 md:py-8 lg:py-10 xl:py-20">
        <div class="container">

            <header class="max-w-3xl mx-auto sm:text-center">
                <h2 class="text-2xl sm:text-3xl lg:text-4xl leading-9 font-bold mb-3">Something about us</h2>
                <p class="text-lg text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta optio placeat quisquam minus rem omnis, aliquam consequatur at deleniti, laudantium fugiat ratione? Minima voluptatem, aliquam quod dolorem necessitatibus, blanditiis, itaque deleniti.</p>
            </header>

            <div class="mt-6 md:mt-8 lg:mt-10 sm:text-center">
                <button type="button" class="inline-block
    px-8 py-3 font-medium text-center rounded-lg shadow hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 transition-ease-outw-full sm:w-auto text-white bg-pink-600 hover:bg-pink-500">
                    Take the tour
                </button>

            </div>

        </div>
    </section>

    <section class="section py-6 md:py-8 lg:py-10 xl:py-20 bg-gray-700">
        <div class="container">

            <div class="grid grid-cols-2 sm:grid-cols-4 gap-8">

                <div class="flex justify-center">
                    <a href="https://clearleft.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/clearleft.svg" alt="Clearleft"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://madebykind.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/kind.svg" alt="Kind"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://www.liip.ch/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/liip.svg" alt="Liip"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://slab.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/slab.svg" alt="Slab"></a>
                    </a>
                </div>

            </div>

        </div>
    </section>

</main>

<footer class="bg-gray-800 py-8">
    <div class="container">
        <div class="md:flex md:items-center md:justify-between lg:px-8">
            <div class="flex justify-center space-x-6 md:order-2">

                <a href="https://twitter.com/frctl" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="Twitter" title="Twitter">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#twitter" />
                    </svg>

                </a>

                <a href="https://github.com/frctl" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="GitHub" title="GitHub">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#github" />
                    </svg>

                </a>

                <a href="https://discord.gg/vuRz4Yx" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="Discord" title="Discord">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#discord" />
                    </svg>

                </a>

            </div>
            <div class="mt-8 md:mt-0 md:order-1">
                <p class="text-center text-base leading-6 text-gray-400">
                    &copy; 2020 · MIT License
                </p>
            </div>
        </div>
    </div>
</footer>