پیاده سازی footer

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/*.html"],
  theme: {
    container: {
      center: true,
    },
    extend: {
      screens: {
        min600: "600px",
      },
      colors: {
        "custom-blue": "#153248",
      },
    },
  },
  plugins: [],
};

 <footer>
        <section class="p-6  bg-custom-blue">
            <section class="bg-[url('https://toplearn.com/site/images/footer-pattern.png')] container">
                <!-- top footer -->
                <div
                    class="flex  items-center justify-center flex-col space-y-12 md:space-y-0  md:flex-row md:justify-between my-6">
                    <!-- ! *************** -->

                    <!-- Newletter layer -->
                    <div class="hidden min600:block newsletter-layer md:w-2/3">

                        <div class="flex justify-center border-2  border-dashed border-slate-600 p-1">
                            <div class="w-2/5 relative">
                                <span class="absolute right-3 top-3 text-center pl-2">

                                    <i class="fa fa-mobile-alt  text-neutral-300 mt-1"></i>
                                </span>
                                <input type="text"
                                    class="block w-full h-12 flex-auto border border-solid border-neutral-300 bg-white bg-clip-padding ps-8 py-[0.25rem] text-base rounded-none font-normal leading-[1.6] text-neutral-700 outline-none "
                                    placeholder="شماره موبایل شما"
                                    aria-label="Recipient's username with two button addons" />
                            </div>

                            <div class="w-2/5 relative">
                                <span class="absolute right-3 top-3 text-center pl-2">

                                    <i class="fa fa-envelope  text-neutral-300 mt-1"></i>
                                </span>
                                <input type="text"
                                    class="block w-full h-12 flex-auto rounded-l-none border border-solid border-neutral-300 bg-white bg-clip-padding ps-8 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none "
                                    placeholder="پست الکترونیکی شما"
                                    aria-label="Recipient's username with two button addons" />
                            </div>


                            <button
                                class="w-1/5 h-12 rounded-none rounded-l bg-lime-500   font-medium  leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-600 focus:outline-none  text-center"
                                type="button" data-te-ripple-init>
                                عضویت در خبرنامه
                            </button>
                        </div>
                    </div>

                    <!-- ! *************** -->
                    <!-- Namad Layer -->
                    <div class="text-white flex justify-center space-x-2 space-x-reverse  md:w-1/3">
                        <div class="w-[86px] h-[100px] bg-white rounded text-center">

                            <img src="https://parspng.com/wp-content/uploads/2023/01/ENAMADpng.parspng.com_.png" alt=""
                                class="w-full h-full">
                        </div>
                        <div class="w-[86px] h-[100px] bg-white rounded text-center">

                            <img alt="logo-anjoman-senfi"
                                src="https://parspng.com/wp-content/uploads/2023/01/samandehipng.parspng.com_.png"
                                class="w-full h-full " />
                        </div>
                        <div class="w-[86px] h-[100px] bg-white rounded text-center">

                            <img alt="logo-anjoman-senfi" src="https://toplearn.com/img/logo/logo_anjooman_senfi.png"
                                class="w-full h-full" />
                        </div>
                    </div>
                </div>
                <!-- bottom footer -->
                <div class="my-5 flex flex-col sn:justify-center items-center md:flex-row md:justify-between">
                    <!-- Menu footer -->
                    <nav class="text-white flex w-3/4">
                        <ul
                            class="flex justify-start flex-wrap  space-y-8 space-y-reverse  space-x-11 space-x-reverse list-disc marker:text-sky-400 text-md font-medium marker:shadow-2xl marker:shadow-[#00bffe] mt-4">
                            <li class="hover:text-[#00bffe] mr-10">
                                <a href="//barnamenevisan.org/" target="_blank" rel="'follow'">
                                    مرجع تخصصی برنامه نویسان
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//barnamenevisan.info/" target="_blank" rel="'follow'">

                                    آموزشگاه برنامه نویسان
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//themeshop.ir/" target="_blank" rel="'follow'">

                                    قالب رایگان
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//barnamenevisan.co/" target="_blank" rel="'follow'">

                                    سفارش پروژه
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//getwork.ir/" target="_blank" rel="'follow'">

                                    گت ورک و کسب درآمد
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//barnamenevis.ir/" target="_blank" rel="'follow'">

                                    موتور جستجو
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//learnby.ir/" target="_blank" rel="'follow'">

                                    لرن بای
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//toplearn.com/page/terms" target="_blank" rel="'follow'">
                                    قوانین سایت
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//toplearn.com/about-us" target="_blank" rel="'follow'">
                                    درباره ما
                                </a>
                            </li>
                            <li class="hover:text-[#00bffe]">

                                <a href="//toplearn.com/faqs" target="_blank" rel="'follow'">
                                    سوالات متداول
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <div class="flex justify-center md:justify-end items-center w-1/4 space-x-8 space-x-reverse">
                        <a href="#" class="rounded-full">

                            <img src="https://toplearn.com/img/instagram.svg" alt="" class="w-8 h-8">
                        </a>
                        <a href="" class="rounded-full">

                            <img src="https://toplearn.com/img/telegram.svg" alt="" class="w-8 h-8">
                        </a>
                    </div>

                </div>
            </section>






        </section>
        <p class="text-center my-6 p-2">تمامی حقوق مادی و معنوی این سایت متعلق به تاپ لرن می باشد و هرگونه کپی برداری
            غیرقانونی
            محسوب خواهد شد</p>
    </footer>