Home
Freja Jensen
Landing page

Landing page

This tailwind example is contributed by Freja Jensen, on 17-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Landing Page

Author Freja Jensen

13.2k

Fork Fullscreen

<section class="bg-blue-600 py-20">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center justify-between">
            <div class="md:w-1/2 mb-8 md:mb-0">
                <h1 class="text-white font-bold text-5xl leading-tight mb-6">Discover the world's best coffee</h1>
                <p class="text-white text-xl mb-8">From hand-picked farms to your cup, we source the finest beans and
                    roast them to perfection.</p>
                <a href="#"
                    class="px-6 py-3 bg-white text-blue-600 font-bold rounded-full hover:bg-blue-700 transition duration-200">Shop
                    now</a>
            </div>
            <div class="md:w-1/2">
                <img src="https://plus.unsplash.com/premium_photo-1675716443562-b771d72a3da7" alt="Coffee beans"
                    class="w-full rounded-lg shadow-lg">
            </div>
        </div>
    </div>
</section>

<section class="py-20">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-gray-800 mb-8">Featured products</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba" alt="Coffee"
                    class="w-full h-64 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Single Origin Blend</h3>
                    <p class="text-gray-700 text-base">Our most popular blend, featuring beans from a single farm in
                        Ethiopia. Notes of chocolate, berries, and citrus.</p>
                    <div class="mt-4 flex items-center justify-between">
                        <span class="text-gray-700 font-medium">$14.99</span>
                        <button
                            class="px-4 py-2 bg-blue-600 text-white font-bold rounded-full hover:bg-blue-700 transition duration-200">Add
                            to cart</button>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <img src="https://plus.unsplash.com/premium_photo-1675716443562-b771d72a3da7" alt="Coffee"
                    class="w-full h-64 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Dark Roast Blend</h3>
                    <p class="text-gray-700 text-base">A bold and flavorful blend of beans from Brazil, Colombia, and
                        Indonesia. Notes of caramel, nuts, and tobacco.</p>
                    <div class="mt-4 flex items-center justify-between">
                        <span class="text-gray-700 font-medium">$12.99</span>
                        <button
                            class="px-4 py-2 bg-blue-600 text-white font-bold rounded-full hover:bg-blue-700 transition duration-200">Add
                            to cart</button>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <img src="https://plus.unsplash.com/premium_photo-1675716443562-b771d72a3da7" alt="Coffee"
                    class="w-full h-64 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Dark Roast Blend</h3>
                    <p class="text-gray-700 text-base">A bold and flavorful blend of beans from Brazil, Colombia, and
                        Indonesia. Notes of caramel, nuts, and tobacco.</p>
                    <div class="mt-4 flex items-center justify-between">
                        <span class="text-gray-700 font-medium">$12.99</span>
                        <button
                            class="px-4 py-2 bg-blue-600 text-white font-bold rounded-full hover:bg-blue-700 transition duration-200">Add
                            to cart</button>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <img src="https://plus.unsplash.com/premium_photo-1675716443562-b771d72a3da7" alt="Coffee"
                    class="w-full h-64 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Dark Roast Blend</h3>
                    <p class="text-gray-700 text-base">A bold and flavorful blend of beans from Brazil, Colombia, and
                        Indonesia. Notes of caramel, nuts, and tobacco.</p>
                    <div class="mt-4 flex items-center justify-between">
                        <span class="text-gray-700 font-medium">$12.99</span>
                        <button
                            class="px-4 py-2 bg-blue-600 text-white font-bold rounded-full hover:bg-blue-700 transition duration-200">Add
                            to cart</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Related Examples

A Fullscreen Hero Section

Author:
Brandon D

3 years ago

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

Author:
Conan Hilton

3 years ago

15.5k
Simple landing page

Author:
Lîmåã M

2 years ago

19k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.6k
Basic landing page template

Author:
Anonymous

2 years ago

11.5k
Product Landing Page

Author:
Noob

3 years ago

12.4k
Hero

Author:
Aman kumar

1 year ago

6.8k
Simple app landing page with video preview

Author:
Prajwal Hallale

2 years ago

10.1k
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
Simple app landing page

Author:
Prajwal Hallale

2 years ago

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

218
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

1 month ago

276

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components