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

14.2k

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

17.8k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

18.8k
Landing page

Author:
Freja Jensen

2 years ago

12.5k
Basic landing page template

Author:
Anonymous

1 year ago

11.1k
Simple app landing page

Author:
Prajwal Hallale

2 years ago

9k
Product Landing Page

Author:
Noob

2 years ago

11.5k
Hero

Author:
Aman kumar

1 year ago

5.9k
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

5k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

1 year ago

9.1k
Simple app landing page with video preview

Author:
Prajwal Hallale

2 years ago

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

Author:
Dmitry

1 year ago

5.4k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

1 week ago

132

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components