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

12.8k

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

3 years ago

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

Author:
Conan Hilton

3 years ago

16k
Simple landing page

Author:
Lîmåã M

2 years ago

19.6k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

21.9k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
Basic landing page template

Author:
Anonymous

2 years ago

11.9k
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

1 year ago

1.8k
card bento

Author:
Raul antonio de la cruz hernandez

1 month ago

66
Coming Soon Countdown Section – Animated & Responsive
A beautifully designed "Coming Soon" landing section built with Tailwind CSS and Alpine.js, perfect for startups, SaaS platforms, and product launches. This component features a live countdown timer, smooth fade-in animations, and floating gradient effects for a futuristic, engaging look. The layout adapts seamlessly to all screen sizes and supports dark mode, creating a professional pre-launch experience that builds anticipation and excitement. ✨ Key Features ⏳ Dynamic countdown timer (days, hours, minutes, seconds) 🎨 Animated gradient orbs for a vibrant background effect 🌙 Dark mode support included 💨 Smooth entrance animations using Alpine.js 📱 Fully responsive design for all devices 🔗 Social media icons to keep your audience connected 💡 Perfect for: Coming Soon or Under Construction pages Product and SaaS pre-launch sites Portfolio or agency landing pages Event or app launch countdowns

Author:
Anonymous

2 months ago

157
OmerLinkSound
OmerLinkSound

Author:
Omer fils ELENGA

1 month ago

59
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

4 months ago

618
Coming Soon Countdown Section – Animated & Responsive
A beautifully designed "Coming Soon" landing section built with Tailwind CSS and Alpine.js, perfect for startups, SaaS platforms, and product launches. This component features a live countdown timer, smooth fade-in animations, and floating gradient effects for a futuristic, engaging look. The layout adapts seamlessly to all screen sizes and supports dark mode, creating a professional pre-launch experience that builds anticipation and excitement. ✨ Key Features ⏳ Dynamic countdown timer (days, hours, minutes, seconds) 🎨 Animated gradient orbs for a vibrant background effect 🌙 Dark mode support included 💨 Smooth entrance animations using Alpine.js 📱 Fully responsive design for all devices 🔗 Social media icons to keep your audience connected 💡 Perfect for: Coming Soon or Under Construction pages Product and SaaS pre-launch sites Portfolio or agency landing pages Event or app launch countdowns

Author:
wavy kits

4 months ago

664

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components