Home
Conan Hilton
Landing Page Template

Landing Page Template

source https://github.com/gary149/tailwindcss-landing-gradients/blob/master/index.html

This tailwind example is contributed by Conan Hilton, on 29-Aug-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Front page

Landing Page

Author Conan Hilton

15.6k

Fork Fullscreen

<body class="bg-gradient-to-br from-gray-900 to-black">
    <div class="text-gray-300 container mx-auto p-8 overflow-hidden md:rounded-lg md:p-10 lg:p-12">
        <div class="flex justify-between">
            <h1 class="font-serif text-3xl font-medium">Landing</h1>
            <a href="https://github.com/gary149/landing-gradients"
                class="self-start px-3 py-2 leading-none text-gray-200 border border-gray-800 rounded-lg focus:outline-none focus:shadow-outline bg-gradient-to-b hover:from-indigo-500 from-gray-900 to-black">
                Get this template
            </a>
        </div>

<p class="font-sans text-4xl font-bold text-gray-200 max-w-5xl lg:text-7xl lg:pr-24 md:text-6xl">
            Spend less time coding and more time creating
        </p>
        <div class="h-10"></div>
        <p class="max-w-2xl font-serif text-xl text-gray-400 md:text-2xl">
            Imagine being able to spent less time... This is a demonstration landing
            page made with tailwindcss
        </p>

<div class="grid gap-8 md:grid-cols-2">
            <div class="flex flex-col justify-center">
                <p
                    class="self-start inline font-sans text-xl font-medium text-transparent bg-clip-text bg-gradient-to-br from-green-400 to-green-600">
                    Simple and easy
                </p>
                <h2 class="text-4xl font-bold">Made for devs and designers</h2>
                <div class="h-6"></div>
                <p class="font-serif text-xl text-gray-400 md:pr-10">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam
                    autem, a recusandae vero praesentium qui impedit doloremque
                    molestias necessitatibus.
                </p>
                <div class="h-8"></div>
                <div class="grid grid-cols-2 gap-4 pt-8 border-t border-gray-800">
                    <div>
                        <p class="font-semibold text-gray-400">Made with love</p>
                        <div class="h-4"></div>
                        <p class="font-serif text-gray-400">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                            Delectus labor.
                        </p>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-400">It's easy to build</p>
                        <div class="h-4"></div>
                        <p class="font-serif text-gray-400">
                            Ipsum dolor sit, amet consectetur adipisicing elit. Delectus
                            amet consectetur.
                        </p>
                    </div>
                </div>
            </div>
            <div>
                <div class="-mr-24 rounded-lg md:rounded-l-full bg-gradient-to-br from-gray-900 to-black h-96"></div>
            </div>
        </div>

<p class="font-serif text-4xl">
            <span class="text-gray-400">If we work all together</span>

<span class="text-gray-600"
          >consectetur adipisicing elit. Consectetur atque molestiae omnis
          excepturi enim!</span>
        </p>

<div class="grid gap-4 md:grid-cols-3">
            <div class="flex-col p-8 py-16 rounded-lg shadow-2xl md:p-12 bg-gradient-to-br from-gray-900 to-black">
                <p
                    class="flex items-center justify-center text-4xl font-semibold text-green-400 bg-green-800 rounded-full shadow-lg w-14 h-14">
                    1
                </p>
                <div class="h-6"></div>
                <p class="font-serif text-3xl">We build products with UX in mind</p>
            </div>
            <div class="flex-col p-8 py-16 rounded-lg shadow-2xl md:p-12 bg-gradient-to-b from-gray-900 to-black">
                <p
                    class="flex items-center justify-center text-4xl font-semibold text-indigo-400 bg-indigo-800 rounded-full shadow-lg w-14 h-14">
                    2
                </p>
                <div class="h-6"></div>
                <p class="font-serif text-3xl">
                    You can trust us to deliver super fast
                </p>
            </div>
            <div class="flex-col p-8 py-16 rounded-lg shadow-2xl md:p-12 bg-gradient-to-bl from-gray-900 to-black">
                <p
                    class="flex items-center justify-center text-4xl font-semibold text-teal-400 bg-teal-800 rounded-full shadow-lg w-14 h-14">
                    3
                </p>
                <div class="h-6"></div>
                <p class="font-serif text-3xl">We made it simple and easy to do</p>
            </div>
        </div>

<div class="grid gap-8 md:grid-cols-3">
            <div class="flex flex-col justify-center md:col-span-2">
                <p
                    class="self-start inline font-sans text-xl font-medium text-transparent bg-clip-text bg-gradient-to-br from-teal-400 to-teal-600">
                    We are humans
                </p>
                <h2 class="text-4xl font-bold">We could work together</h2>
                <div class="h-6"></div>
                <p class="font-serif text-xl text-gray-400 md:pr-10">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam
                    autem, a recusandae vero praesentium qui impedit doloremque
                    molestias.
                </p>
                <div class="h-8"></div>
                <div class="grid gap-6 pt-8 border-t border-gray-800 lg:grid-cols-3">
                    <div>
                        <p class="font-semibold text-gray-400">Made with love</p>
                        <div class="h-4"></div>
                        <p class="font-serif text-gray-400">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                            Delectus labor.
                        </p>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-400">It's easy to build</p>
                        <div class="h-4"></div>
                        <p class="font-serif text-gray-400">
                            Ipsum dolor sit, amet consectetur adipisicing elit. Delectus
                            amet consectetur.
                        </p>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-400">It's easy to build</p>
                        <div class="h-4"></div>
                        <p class="font-serif text-gray-400">
                            Ipsum dolor sit, amet consectetur adipisicing elit. Delectus
                            amet consectetur.
                        </p>
                    </div>
                </div>
            </div>
            <div>
                <div class="-mr-24 rounded-lg md:rounded-l-full bg-gradient-to-br from-gray-900 to-black h-96"></div>
            </div>
        </div>

<div class="grid gap-4 md:grid-cols-4">
            <ul class="space-y-1 text-gray-400">
                <li class="pb-4 font-serif text-gray-400">Social networks</li>
                <li>
                    <a href="https://twitter.com/victormustar" class="hover:underline">Twitter</a>
                </li>
                <li>
                    <a href="#" class="hover:underline">Linkedin</a>
                </li>
                <li>
                    <a href="#" class="hover:underline">Facebook</a>
                </li>
            </ul>
            <ul class="space-y-1 text-gray-400">
                <li class="pb-4 font-serif text-gray-400">Locations</li>
                <li>
                    <a href="#" class="hover:underline">Paris</a>
                </li>
                <li>
                    <a href="#" class="hover:underline">New York</a>
                </li>
                <li>
                    <a href="#" class="hover:underline">London</a>
                </li>
                <li>
                    <a href="#" class="hover:underline">Singapour</a>
                </li>
            </ul>
            <ul class="space-y-1 text-gray-400">
                <li class="pb-4 font-serif text-gray-400">Company</li>
                <li>
                    <a href="#" class="hover:underline">The team</a>
                </li>
                <li>
                    <a href="#" class="hover:underline">About us</a>
                </li>
                <li>
                    <a href="#" class="hover:underline">Our vision</a>
                </li>
                <li>
                    <a href="#" class="hover:underline">Join us</a>
                </li>
            </ul>
            <ul class="space-y-1 text-gray-400">
                <li class="pb-4 font-serif text-gray-400">Join</li>
                <li>
                    <a href="https://github.com/gary149/landing-gradients"
                        class="self-start px-3 py-2 leading-none text-gray-200 border border-gray-800 rounded-lg focus:outline-none focus:shadow-outline bg-gradient-to-b hover:from-indigo-500 from-gray-900 to-black">
                        Get this template
                    </a>
                </li>
            </ul>
        </div>
        <div class="h-12"></div>
    </div>
</body>

Related Examples

Simple landing page

Author:
Lîmåã M

2 years ago

19k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

21k
Landing page

Author:
Freja Jensen

2 years ago

13.2k
Basic landing page template

Author:
Anonymous

2 years ago

11.6k
Simple app landing page

Author:
Prajwal Hallale

2 years ago

9.1k
Product Landing Page

Author:
Noob

3 years ago

12.4k
Hero

Author:
Aman kumar

1 year ago

6.8k
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

5.8k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.6k
Simple app landing page with video preview

Author:
Prajwal Hallale

2 years ago

10.1k
Dropdown profile
Using DaisyUI Based on: https://tailwindcomponents.com/component/dropdown-7

Author:
Dmitry

1 year ago

5.8k
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

Author:
wavy kits

1 month ago

227

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components