<div class="container mx-auto">
    <div class="p-5 bg-gray-200 rounded-lg py-12 m-5">
        <div class="flex flex-col ">
            <h3 class="text-3xl leading-10 text-blue-800 w-full text-center font-bold">Sign up to our newsletter to receive updates</h3>
            <div class="text-base text-gray-500 w-full  md:w-2/4 self-center text-center lg:pt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
        <div class="flex flex-row justify-center space-x-3 py-4">
            <input class="bg-white rounded-lg text-sm px-2 sm:px-3 md:px-8 py-3" type="text" placeholder="email@email.com">
            <input class="font-bold rounded-lg text-white bg-blue-700 hover:bg-blue-600 cursor-pointer px-3 py-1 md:px-6 md:py-3 focus:outline-none"  type="submit" value="subscribe">
        </div>
        <div class="font-bold text-blue-700 content-center">
            <ul class="flex flex-row space-x-6 py-4 justify-center">
                <li>
                    <a href="#" class="hover:underline cursor-pointer">Footerlink 1</a>
                </li>
                 <li>
                    <a href="#" class="hover:underline cursor-pointer">Footerlink 2</a>
                </li>
                 <li>
                    <a href="#" class="hover:underline cursor-pointer">Footerlink 3</a>
                </li>
                 <li>
                    <a href="#" class="hover:underline cursor-pointer">Footerlink 4</a>
                </li>

            </ul>
        </div>
        <div class="">
            <div class="flex justify-center pt-5 mb-5">
              <img class=" w-40" src="https://www.beterbekend.nl/wp-content/themes/beterbekend/img/beter-bekend-logo-normal.svg" alt="">
            </div>
            <ul class="flex flex-row space-x-4 justify-center">
                <li>
                    <a href="#" target="_blank" rel="nofollow">
                        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50%" y="50%"
                            viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"
                            class="stroke-current fill-current text-blue-700 w-4 hover:opacity-50 duration-300 ease-in-out">
                        <path d="M363.273,0H148.728C66.719,0,0,66.719,0,148.728v214.544C0,445.281,66.719,512,148.728,512h214.544
                            C445.281,512,512,445.281,512,363.273V148.728C512,66.719,445.281,0,363.273,0z M472,363.272C472,423.225,423.225,472,363.273,472
                            H148.728C88.775,472,40,423.225,40,363.273V148.728C40,88.775,88.775,40,148.728,40h214.544C423.225,40,472,88.775,472,148.728
                            V363.272z"/>
                        <path d="M256,118c-76.094,0-138,61.906-138,138s61.906,138,138,138s138-61.906,138-138S332.094,118,256,118z M256,354
                            c-54.037,0-98-43.963-98-98s43.963-98,98-98s98,43.963,98,98S310.037,354,256,354z"/>
                        <circle cx="396" cy="116" r="20"/>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" rel="nofollow">
                        <svg id="Bold" enable-background="new 0 0 24 24" viewBox="0 0 24 24" x="50%" y="50%" xmlns="http://www.w3.org/2000/svg"
                            class="stroke-current  fill-current text-blue-700 w-4 hover:opacity-50 duration-300 ease-in-out">
                            <path d="m15.997 3.985h2.191v-3.816c-.378-.052-1.678-.169-3.192-.169-3.159 0-5.323 1.987-5.323 5.639v3.361h-3.486v4.266h3.486v10.734h4.274v-10.733h3.345l.531-4.266h-3.877v-2.939c.001-1.233.333-2.077 2.051-2.077z"/>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" rel="nofollow">
                        <svg enable-background="new 0 0 24 24"  viewBox="0 0 24 24" x="50%" y="50%" xmlns="http://www.w3.org/2000/svg"
                            class="stroke-current fill-current text-blue-700 w-4 hover:opacity-50 duration-300 ease-in-out">
                            <path d="m23.994 24v-.001h.006v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07v-2.185h-4.773v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243v7.801z"/>
                            <path d="m.396 7.977h4.976v16.023h-4.976z"/>
                            <path d="m2.882 0c-1.591 0-2.882 1.291-2.882 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909c-.001-1.591-1.292-2.882-2.882-2.882z"/>                           
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" rel="nofollow">
                        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50%" y="50%"
                            viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"
                            class="stroke-current fill-current text-blue-700 w-4 hover:opacity-50 duration-300 ease-in-out">                        
                                <path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016
                                    c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992
                                    c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056
                                    c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152
                                    c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792
                                    c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44
                                    C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568
                                    C480.224,136.96,497.728,118.496,512,97.248z"/>                          
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.