Home
Noob
Product Landing Page

Product Landing Page

This tailwind example is contributed by Noob, on 21-Sep-2022. Component is made with Tailwind CSS v3. similar terms for this example is Front page

Landing Page

Author Noob

11.6k

Fork Fullscreen

<div class="font-mono">
    
    <div class="bg-blue-500 p-4 flex justify-between items-center">
        
        <div class="flex items-center">
            <img src="https://cdn2.iconfinder.com/data/icons/xomo-basics/128/document-06-512.png" width="50" alt="LOGO" class="mr-2">
            <a href="#" class="inline-block p-2 text-blue-200 mr-2 hover:text-blue-100">Home</a>
            <a href="#" class="inline-block p-2 text-blue-200 hover:text-blue-100">About</a>
        </div>
        
        <div class="hidden md:block">
            <a href="#" class="inline-block p-2 text-blue-200 hover:text-blue-100 mr-2">Login</a>
            <a href="#"
                class="inline-block py-2
                       px-4 text-yellow-700 bg-yellow-500 hover:bg-yellow-300 hover:text-yellow-900 rounded transition ease-in duration-150">Sign
                up</a>
        </div>

</div>

<div class="md:w-1/2 mb-10 md:mb-0">
            <h3 class="text-3xl line-through mb-2">Sadness?</h3>
            <h3 class="text-3xl line-through mb-2">Boredom?</h3>
            <h3 class="text-3xl line-through mb-4">No motivation?</h3>
            <h2 class="text-5xl font-bold mb-8">Travelling.</h2>
            <p class="mb-10">There is never a sad day travelling.</p>
            <a href="#"
                class="inline-block py-3 px-6 md:text-lg bg-pink-200 hover:text-red-100 hover:bg-pink-800 rounded mr-2">Read
                more</a><a href="#"
                class="inline-block py-3 px-6 md:text-lg bg-pink-200 hover:text-red-100 hover:bg-pink-800 rounded mr-2">Subsribe</a>
        </div>

<div class="md:w-1/2"><img src="https://images.unsplash.com/photo-1533105079780-92b9be482077?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Travel" class="w-full rounded shadow-2xl h-auto max-h-full sm:max-h-screen md:max-h-full lg:max-h-screen xl:max-h-full">
        </div>
    </div>
    
    <div class="flex py-16 px-10 bg-blue-500 text-blue-200 text-center">
        <div class="mr-3 mb-4 text-center">
            <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1008&q=80" alt="Travelling image" class="w-full rounded border-solid border-2 border-blue-200">
            <p>Places!!</p>
        </div>
        <div class="mr-3 mb-4 text-center">
            <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1008&q=80" alt="Travelling image" class="w-full rounded border-solid border-2 border-blue-200">
            <p>Places!!</p>
        </div>
        <div class="mr-3 mb-4 text-center">
            <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1008&q=80" alt="Travelling image" class="w-full rounded border-solid border-2 border-blue-200">
            <p>Places!!</p>
        </div>
        <div class="mr-3 mb-4 text-center">
            <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1008&q=80" alt="Travelling image" class="w-full rounded border-solid border-2 border-blue-200">
            <p>Places!!</p>
        </div>
    </div>

<div class="p-10 bg-blue-900  text-blue-400 flex justify-between">
        <div class="md:w-1/2">
            <h3 class="text-lg mb-2">Join the newsletter!</h3>
            <form action="" class="flex">
                <input type="email" class="rounded w-full mr-2 py-3 px-4 outline-none focus:bg-blue-100">
                <button class="bg-red-400 rounded px-4 hover:bg-red-600">Join</button>
            </form>
        </div>
        <div class="flex items-center">Copyright &copy; Geet 2020</div>
    </div>
</div>

Related Examples

Landing page

Author:
Freja Jensen

2 years ago

12.6k
Landing Page Template
source https://github.com/gary149/tailwindcss-landing-gradients/blob/master/index.html

Author:
Conan Hilton

2 years ago

14.5k
Simple landing page

Author:
Lîmåã M

2 years ago

18k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

19.2k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

1 year ago

9.2k
Basic landing page template

Author:
Anonymous

1 year ago

11.2k
Hero Beer

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.9k
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 month ago

329
home
html , css

Author:
Hacker Development

1 month ago

232
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

6.8k
Animated Coming Soon Page 1
animated coming soon landing page

Author:
81

3 weeks ago

39
Travel Landing Page: Australia

Author:
Maxim

3 months ago

934

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components