SaaS landing page
Tags: frontend, landingpage, tailwindcss, showdev
Published: 2024-07-11 06:28:32

Hi all, 
I created this free saas landing page.

### Live site
You can check the live site [here](https://celestialsaas.netlify.app/)

### features
* respnosive
* Framework independent: uses plain HTML css
* Uses tailwind for rapid development.

### Screenshot
![SaaS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7cn4a1g7idve1m03uyk.png)

### Source code:
HTML code
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Celestial SaaS</title>
    <meta name="description" content="">
    <link rel="shortcut icon" href="./assets/logo/logo1.png" type="image/x-icon">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Title of the project" />
    <meta property="og:description" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://github.com/PaulleDemon" /> <!--Replace with the current website url-->
    <meta property="og:image" content="" />
  

    <!-- <link rel="stylesheet" href="../../tailwind-css/tailwind-runtime.css"> -->
    <link rel="stylesheet" href="./css/tailwind-build.css">
    <link rel="stylesheet" href="css/index.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />


</head>
<body class="tw-min-h-[100vh] tw-bg-[#ffffff] tw-flex tw-flex-col">
    
    <div class="tw-flex tw-absolute tw-top-0 tw-w-full tw-h-[150px]">

        <div class="header-gradient tw-w-full tw-h-full">

        </div>

    </div>

    <header class="tw-flex tw-w-full tw-z-20
                    tw-h-[60px]  
                    md:tw-justify-around
                    tw-absolute tw-top-0 tw-px-[5%]
                    max-md:tw-px-4
                    max-md:tw-mr-auto
                    tw-bg-opacity-0
                    tw-text-black
                    ">
        <a class="tw-w-[50px] tw-h-[50px] tw-p-[4px]" href="">
            <img src="./assets/logo/logo1.png" 
                  alt="logo" class="tw-w-full tw-h-full tw-object">
        </a>
        <div class="collapsible-header animated-collapse  max-md:tw-shadow-md"
                    id="collapsed-header-items"
                    >
            <div class=" tw-w-max
                            tw-flex tw-gap-5 tw-h-full md:tw-mx-auto
                            md:tw-place-items-center 
                            max-md:tw-place-items-end
                            tw-text-base max-md:tw-flex-col
                            max-md:tw-mt-[30px]
                            max-md:tw-gap-5
                            tw-text-black
                        ">
                    
                <a class="header-links" href="">
                    About us
                </a>
                <a class="header-links" href="#pricing">
                    Pricing
                </a>
                <a class="header-links" href="">
                    features
                </a>
                <a class="header-links" href="">
                    company
                </a>
            </div>
            <div class="tw-flex tw-gap-[20px] tw-place-items-center tw-text-base
                         max-md:tw-place-content-center
                         max-md:tw-w-full
                         max-md:tw-flex-col
                         tw-mx-4
                         ">

                <a href=""
                    aria-label="signup"
                    class=" 
                            tw-py-2
                            tw-px-3
                            tw-rounded-full
                            tw-bg-primary
                            tw-text-white
                            hover:tw-translate-x-2
                            tw-transition-transform
                            tw-duration-[0.3s]
                        "   
                        >
                    <span>Get started</span>
                    <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
        <button class="tw-absolute tw-text-black tw-z-50 
                        tw-right-3
                        tw-top-3
                        tw-text-3xl  bi bi-list lg:tw-hidden"  
                onclick="toggleHeader()" aria-label="menu" id="collapse-btn">
        </button>
    </header>

    <section class="tw-w-full tw-min-h-[100vh] tw-max-w-[100vw]
                        max-md:tw-mt-[50px]
                        max-lg:tw-p-4
                        tw-flex tw-flex-col tw-overflow-hidden tw-relative"
                        >
            
            <div class="tw-w-full tw-h-full tw-p-[5%]
                        tw-place-content-center tw-min-h-[100vh]
                        tw-gap-6 max-xl:tw-place-items-center
                        tw-flex tw-flex-col">

                <div class="tw-flex tw-flex-col tw-place-content-center tw-items-center">
                    <div class="tw-text-6xl max-lg:tw-text-4xl tw-font-semibold 
                                tw-leading-[80px] tw-text-center
                                max-md:tw-leading-snug tw-uppercase" 
                                >
                        <span>
                            Re-imagining the Future
                        </span>
                        <br>
                        <span class="tw-text-primary">
                            of Software
                        </span>
                    </div>  
                    <div class="tw-mt-10 tw-max-w-[450px] tw-p-2 tw-text-center max-lg:tw-max-w-full">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error adipisci corrupti accusamus reiciendis similique assumenda nostrum fuga dicta vitae ipsum.                        
                    </div>
                    
                    <div class="tw-mt-4 tw-flex 
                                tw-overflow-hidden tw-gap-4 
                                tw-p-2
                                tw-place-items-center ">
                       
                        <a class="btn  
                                    tw-duration-[0.3s]
                                    hover:tw-scale-x-[1.03]
                                    tw-transition-transform
                                    "
                                    href=""
                                    >
                            Get started
                        </a>  
                        <a class="btn  
                                    !tw-text-primary
                                    !tw-bg-[#c8cbf984]
                                    tw-duration-[0.3s]
                                    hover:tw-scale-x-[1.03]
                                    tw-transition-transform
                                    "
                                    href=""
                                    >
                            <span>Learn more</span>
                        </a>  
                    </div>

                    <div class="tw-flex tw-mt-6 tw-gap-4 tw-text-2xl reveal">
                        
                    </div>

                </div>
                
                <div class="tw-w-full tw-flex tw-place-content-center 
                                tw-place-items-center tw-overflow-hidden">
                    <div class="tw-relative tw-w-fit
                                tw-flex tw-place-items-center tw-place-content-center">

                        <div class="tw-overflow-hidden tw-flex 
                                        tw-max-w-[650px] 
                                        tw-max-h-[550px] 
                                        tw-min-h-[450px] 
                                        tw-min-w-[350px] 
                                        max-lg:tw-max-h-[320px]
                                        max-lg:tw-min-h-[150px]
                                        max-lg:tw-h-fit
                                        max-lg:tw-w-[320px]
                                        tw-rounded-2xl tw-shadow-xl">
                                <img src="./assets/images/home/dashboard.png" 
                                        alt="dashboard" class="tw-h-full tw-w-full 
                                                                tw-object-cover max-lg:tw-object-contain" 
                                        >
                               
                        </div>
                    </div>
                </div> 

            </div>
        
    </section>
    <section class="tw-w-full  tw-max-w-[100vw]
                    tw-flex tw-flex-col tw-overflow-hidden tw-relative 
                    tw-place-items-center
                    tw-place-content-center
                    tw-p-6
                    "
                    >
        <div class="tw-flex tw-w-full tw-gap-10 tw-place-content-center ">
            <!-- add the brands using your app  -->
            <div class="tw-w-[150px] tw-h-[30px]">
                <img src="./assets/images/brand-logos/google.svg" alt="Google"
                    class="tw-w-full tw-h-full 
                            tw-object-contain tw-grayscale
                            hover:tw-grayscale-0
                            tw-transition-colors
                            " srcset="">
            </div>
            <div class="tw-w-[150px] tw-h-[30px]">
                <img src="./assets/images/brand-logos/microsoft.svg" alt="Microsoft"
                    class="tw-w-full tw-h-full tw-object-contain 
                            tw-grayscale 
                            hover:tw-grayscale-0
                            tw-transition-colors"
                    srcset="">
            </div>
            <div class="tw-w-[150px] tw-h-[30px]">
                <img src="./assets/images/brand-logos/adobe.svg" alt="Adobe"
                    class="tw-w-full tw-h-full tw-object-contain tw-grayscale
                            hover:tw-grayscale-0
                            tw-transition-colors
                    " srcset="">
            </div>
        </div>

    </section>
    <section class="tw-w-full  tw-max-w-[100vw]
                    tw-flex tw-flex-col tw-overflow-hidden tw-relative 
                    tw-place-items-center
                    tw-place-content-center
                    tw-p-6
                    "
                    >
        <div class="tw-flex tw-flex-col tw-gap-5 tw-text-center tw-max-w-[750px]">
            <h2 class="tw-text-4xl max-lg:tw-text-3xl tw-mt-10 tw-font-semibold ">
                Simple. 
                <span class="tw-text-primary">Fast.</span>
                Loved
            </h2>

            <div class=" tw-text-gray-700 ">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus consequatur odit exercitationem repellendus, recusandae ratione at tenetur, omnis dicta tempore dolor saepe quos doloremque tempora quibusdam. Aspernatur deserunt voluptatem aliquid.
            </div>
        </div>
    </section>

    <section class="tw-w-full  tw-max-w-[100vw]
                    tw-flex tw-flex-col tw-overflow-hidden tw-relative 
                    tw-place-items-center
                    tw-place-content-center
                    tw-p-6
                    "
                    id=""
                    >
        <div class="tw-mt-8 tw-flex tw-flex-col tw-gap-5 tw-place-items-center">
            <div class="tw-flex tw-flex-col tw-gap-3 tw-text-center tw-mt-5">
                <h3 class="tw-text-xl tw-text-primary">Features loved by our clients</h>
                <h2 class="tw-text-4xl tw-font-semibold">Core features</h2>
            </div>
            <div class="tw-flex tw-flex-wrap tw-max-w-[60%] tw-place-content-center tw-mt-6 max-lg:tw-flex-col tw-gap-2">
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-boombox-fill "></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 1</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-award-fill"></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 2</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-book-fill "></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 3</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-briefcase-fill "></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 4</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-credit-card-2-front-fill"></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 5</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                    <!-- <img src="./assets/images/home/sample.jpg" 
                            alt="feature1"> -->
                <i class="tw-text-5xl tw-text-primary bi bi-fire "></i>
                <h3 class="tw-text-2xl tw-font-semibold">Feature 6</h3>
                <div class="tw-text-[#595959]">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                </div>
            </div>
            </div>
        </div>
    </section>

    <section class="tw-mt-5 tw-w-full tw-flex tw-flex-col tw-p-[2%]
                     tw-place-items-center">

        <h3 class="tw-text-3xl max-md:tw-text-2xl tw-text-primary tw-font-medium">
            What our clients say
        </h3>
        <!-- Testimonials -->
        <div class="max-md:tw-columns-1 lg:tw-columns-2 xl:tw-columns-3 tw-space-y-8 tw-gap-10 tw-mt-8">
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/women.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="women">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">Trich B</div>
                        <div class="tw-text-[#4b4b4b]">AMI, ceo</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, vero.
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/man.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">John B</div>
                        <div class="tw-text-[#4b4b4b]">ABC, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore deserunt delectus consectetur enim cupiditate ab nemo voluptas repellendus qui quas..
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/man2.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">Mante </div>
                        <div class="tw-text-[#4b4b4b]">xyz, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, numquam.
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/women.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">Lara </div>
                        <div class="tw-text-[#4b4b4b]">xz, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta, saepe illum. Dicta quisquam praesentium quod!
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/man.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">James </div>
                        <div class="tw-text-[#4b4b4b]">app, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga accusamus non enim debitis rem neque beatae explicabo corrupti porro ullam?
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/man2.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">Ron </div>
                        <div class="tw-text-[#4b4b4b]">marketplace, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga accusamus non enim debitis rem neque beatae explicabo corrupti porro ullam?
                </p>
            </div>
        </div>

    </section>

      <section class="tw-mt-5 tw-w-full tw-flex tw-flex-col tw-p-[2%]
                     tw-place-items-center" id="pricing">

        <h3 class="tw-text-3xl max-md:tw-text-2xl tw-text-primary tw-font-medium">
            Simple pricing
        </h3>
        <!-- pricing -->
        <div class="tw-flex tw-flex-wrap tw-gap-8 tw-place-content-center max-lg:tw-flex-col tw-mt-10">

            <div class="tw-w-[380px] max-lg:tw-w-[320px] tw-p-8 tw-flex tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-shadow-xl">
                <h3 class="">
                    <span class="tw-text-5xl tw-font-semibold">$9</span>
                    <span class="tw-text-gray-600 tw-text-2xl">/mo</span>
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
                <hr>
                <ul class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-lg tw-text-center tw-text-gray-600">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
                <a href="http://" class="tw-mt-8 btn !tw-w-full hover:tw-scale-x-[1.02] 
                                         tw-transition-transform tw-duration-[0.3s]">
                    Get now
                </a>
            </div>
            <div class="tw-w-[380px] max-lg:tw-w-[320px] tw-p-8 tw-flex tw-flex-col tw-place-items-center tw-gap-2 
                        tw-rounded-lg tw-shadow-xl tw-border-2 tw-border-primary">
                <h3 class="">
                    <span class="tw-text-5xl tw-font-semibold">$19</span>
                    <span class="tw-text-gray-600 tw-text-2xl">/mo</span>
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
                <hr>
                <ul class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-lg tw-text-center tw-text-gray-600">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
                <a href="http://" class="tw-mt-8 btn !tw-w-full hover:tw-scale-x-[1.02] 
                                         tw-transition-transform tw-duration-[0.3s]">
                    Get now
                </a>
            </div>
            <div class="tw-w-[380px] max-lg:tw-w-[320px] tw-p-8 tw-flex tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-shadow-xl">
                <h3 class="">
                    <span class="tw-text-5xl tw-font-semibold">$49</span>
                    <span class="tw-text-gray-600 tw-text-2xl">/mo</span>
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
                <hr>
                <ul class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-lg tw-text-center tw-text-gray-600">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
                <a href="http://" class="tw-mt-8 btn !tw-w-full hover:tw-scale-x-[1.02] 
                                         tw-transition-transform tw-duration-[0.3s]">
                    Get now
                </a>
            </div>
        </div>

    </section>

    <section class="tw-w-full tw-flex 
                    tw-flex-col
                    tw-place-content-center 
                    tw-px-[10%]
                    tw-p-[5%]
                    tw-gap-[10%]
                    tw-place-items-center
                    ">

        <div class="tw-w-full tw-place-content-center 
                    tw-flex tw-flex-col tw-gap-3
                    tw-place-items-center
                    ">

            <h2 class="tw-text-2xl max-md:tw-text-xl tw-text-primary">Special Newsletter signup</h2>
            <h2 class="tw-text-xl max-md:tw-text-lg">Keep yourself updated</h2>

            <div class="tw-flex tw-h-[60px]  tw-p-2 
                        tw-overflow-hidden tw-gap-2 tw-place-items-center ">
                <input type="email" class="input tw-w-full tw-h-full 
                                             tw-p-2"
                        placeholder="email"
                    >
                <a class="btn  
                            tw-duration-[0.3s]
                            tw-transition-colors
                            "
                        href=""
                            >
                    Signup
                </a>   
            </div>

        </div>
    </section>

    <footer class="tw-flex max-md:tw-flex-col tw-w-full tw-p-[5%]
                    tw-px-[10%] tw-place-content-around tw-gap-3 
                    tw-text-black
                    tw-mt-auto
                    ">
        <div class="tw-h-full tw-w-[250px] tw-flex tw-flex-col 
                    tw-gap-6 tw-place-items-center max-md:tw-w-full">
            
            <img src="./assets/logo/logo1.png" 
                alt="logo" srcset="" class="tw-max-w-[120px]">
            <div>
                2 Lord Edward St,   
                <br>
                D02 P634,
                <br>
                United Kingdom
            </div>
            <div class="tw-mt-3 tw-font-semibold tw-text-lg">
                Follow us
            </div>
            <div class="tw-flex tw-gap-4 tw-text-2xl">
                <a href="" aria-label="Facebook">
                    <i class="bi bi-facebook"></i>
                </a>
                <a href="https://twitter.com/@pauls_freeman" aria-label="Twitter">
                    <i class="bi bi-twitter"></i>
                </a>
                <a href="https://instagram.com/" class="tw-w-[40px] tw-h-[40px]" aria-label="Instagram">
                   <i class="bi bi-instagram"></i>
                </a>
            </div>
        </div>

        <div class="tw-h-full tw-w-[250px] tw-flex tw-flex-col 
                    tw-gap-4">

            <h2 class="tw-text-3xl max-md:tw-text-xl">
                Resources
            </h2>
            <div class=" tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                <a href="" class="footer-link">About us</a>
                <a href="" class="footer-link">FAQ</a>
                <a href="" class="footer-link">Contact Us</a>
                <a href="" class="footer-link">Blogs</a>
                <a href="" class="footer-link">Privacy policy</a>
            </div>
        </div>


    </footer>

</body>

<script src="./index.js"></script>

</html>
```

index.css
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{

    --btn-color: #fdfdfd;/* button color*/
    --btn-bg: #4f55c1;/* button bg color*/

    --primary-text-color: #4f55c1;
    --link-hover: #4f55c1;
    --input-hover-bd-color: #4f55c1;
}


html {
    scroll-behavior: smooth;
    font-family: "Roboto", sans-serif;
}

header{
    /* background-color: #fff;
    color: #000; */
}


header > .collapsible-header{
    display: flex;
    gap: 1rem;
    width: 100%;
    background-color: inherit;
    place-content: center;
    overflow: hidden;
    transition: width 0.3s ease;
}

.animated-collapse{
    transition: width 0.3s ease;
}

.header-gradient{
    background: rgb(206,174,212);
    background: linear-gradient(83deg, #ceaed474 15%, #abd4e693 33%, #73edc097 79%, #8c91e86b 100%);
    filter: blur(100px);
}

.header-links {
    display: flex;
    align-items: center;
    min-width: fit-content;
    border-radius: 10px;
    padding: 5px 10px;
    transition: background-color 0.5s, color 0.5s;
}


.header-links:hover {
    color: var(--link-hover);
}

.primary-text-color{
    color: var(--primary-text-color);
}

.opacity-0{
    opacity: 0 !important;
}

.opacity-100{
    opacity: 100 !important;
}

.btn{
    padding: 10px 15px;
    width: max-content;
    border-radius: 24px;
    color: var(--btn-color);
    background-color: var(--btn-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.btn:hover{

}

.btn:disabled{
    cursor: default;
}

.input{
    padding: 10px;
    background-color: transparent;
    border-radius: 25px;
    /* outline: none; */
    min-width: 100px;
    border: 2px solid #818080;
    /* transition: border 0.3s; */
}

.input:active, .input:focus, .input:focus-within{
    border: 2px solid var(--input-hover-bd-color);
}

.input-error{
    border-bottom: 3px solid #ff1e1e;
}

.input-error:focus-within{
    border-bottom: 3px solid #fd0101;
}


.message-container{
    /* container used to display message */
    border: 3px solid #c6e1f5;
    background-color: #d7edf8;
    color: #043893;
    width: 100%;
    max-width: 450px;
    border-radius: 5px;
    min-height: 50px;
    padding: 5px 10px;
}

/* Navigation dots styling */
.dots-container {
    text-align: center;
    margin-top: 20px;
}

.footer-link{
    color: #0d0d0d;
    transition: color 0.3s;
}

.footer-link:hover{
    color: #483cf4;
}


.review-container {
    position: relative;
    max-width: 600px;
    margin: auto;
}

.review-card{
    box-shadow: 0px 2px 4px #757474a0;
    border-radius: 15px;
    /* width: 200px; */
    /* height: 550px; */
    padding: 10px;
}

/* --------- collapsible div ---------- */
.collapsible {
    background-color: #f3f0f0;
    color: #2b2929;
    /* cursor: pointer; */
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: 0.4s;
}

/* Style for the collapsible content */
.content {
    padding: 0 18px;
    /* display: none; */
    height: 0px;
    overflow: hidden;
    background-color: transparent;
    transition: height 0.5s;
    text-align: justify;
    margin-top: 10px;
}

.collapsible .active,
.collapsible:hover {
    /* background-color: #dedddd; */
}

@media not all and (min-width: 1024px) {
    header .collapsible-header {
        position: fixed;
        right: 0px;
        flex-direction: column;
        opacity: 0;
        height: 100vh;
        min-height: 100vh;
        height: 100dvh;
        width: 0vw;
        justify-content: space-between;
        padding: 5px;
        padding-top: 5%;
        padding-bottom: 5%;
        place-items: end;
        background-color: #ffffff;
        color: #000000;
        overflow-y: auto;
        box-shadow: 2px 0px 3px #000;
    }

    .header-links{
        color: black;
    }
    
}
```

Want more? Follow me on [Github](https://github.com/PaulleDemon)