Small landing

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Front page

Landing Page

Author Crimson

Tailwind v3.4 2.4k 5

Fork Fullscreen

@keyframes reveal {
            0% { transform: scaleX(0); transform-origin: left; }
            100% { transform: scaleX(1); transform-origin: left; }
        }

@keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

.fade-in {
            opacity: 0;
            animation: fadeIn 1s ease-out forwards;
        }

.reveal-line {
            animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        }

.marquee {
            animation: marquee 30s linear infinite;
        }

.nav-blur {
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

.image-gradient {
            background: linear-gradient(to right, rgba(0,0,0,0.95), rgba(0,0,0,0.3));
        }

@media (max-width: 768px) {
            .image-gradient {
                background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.95));
            }
        }

body {
            font-family: 'Montserrat', sans-serif;
        }

h1, h2, .logo {
            font-family: 'Cormorant Garamond', serif;
        }

.hover-line {
            position: relative;
        }

.hover-line::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: white;
            transition: width 0.3s ease;
        }

.hover-line:hover::after {
            width: 100%;
        }

.mobile-menu {
            transform: translateY(-100%);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

.mobile-menu.active {
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-black text-white selection:bg-white selection:text-black">
    
    <nav class="fixed w-full z-50 nav-blur border-b border-white/10">
        <div class="max-w-[2000px] mx-auto px-4 sm:px-8">
            <div class="flex justify-between h-24 items-center">
                <div class="text-2xl sm:text-3xl font-light tracking-[0.3em] logo">ATELIER</div>
                <div class="hidden md:flex space-x-16 text-xs tracking-[0.2em]">
                    <a href="#" class="hover-line">COLLECTIONS</a>
                    <a href="#" class="hover-line">BESPOKE</a>
                    <a href="#" class="hover-line">LOOKBOOK</a>
                    <a href="#" class="hover-line">CONTACT</a>
                </div>
                <button class="md:hidden w-8 h-8 flex flex-col justify-center space-y-2" onclick="toggleMenu()" aria-label="Toggle menu">
                    <span class="w-full h-[1px] bg-white transform transition-transform origin-right"></span>
                    <span class="w-full h-[1px] bg-white transform transition-transform origin-right"></span>
                </button>
            </div>
        </div>
    </nav>

<div class="mobile-menu fixed inset-0 bg-black z-40 flex flex-col justify-center items-center space-y-12 nav-blur md:hidden pt-24">
        <a href="#" class="text-2xl tracking-[0.2em] hover:text-white/50 transition-colors">COLLECTIONS</a>
        <a href="#" class="text-2xl tracking-[0.2em] hover:text-white/50 transition-colors">BESPOKE</a>
        <a href="#" class="text-2xl tracking-[0.2em] hover:text-white/50 transition-colors">LOOKBOOK</a>
        <a href="#" class="text-2xl tracking-[0.2em] hover:text-white/50 transition-colors">CONTACT</a>
    </div>

<section class="min-h-screen relative flex items-center">
        <div class="absolute inset-0">
            <img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf" 
                 alt="Luxury Suit" 
                 class="w-full h-full object-cover">
            <div class="absolute inset-0 image-gradient"></div>
        </div>
        <div class="relative z-10 max-w-[2000px] mx-auto px-4 sm:px-8 pt-32">
            <div class="max-w-4xl">
                <p class="text-sm tracking-[0.3em] mb-8 fade-in" style="animation-delay: 0.5s">WELCOME TO ATELIER</p>
                <h1 class="text-[12vw] md:text-[7vw] font-light leading-[0.9] mb-8 fade-in" style="animation-delay: 0.8s">
                    CRAFTED WITH<br/>PRECISION
                </h1>
                <div class="h-[1px] w-32 bg-white reveal-line mb-12" style="animation-delay: 1.2s"></div>
                <p class="text-lg sm:text-xl font-light tracking-wide text-white/80 max-w-xl mb-16 fade-in leading-relaxed" style="animation-delay: 1.5s">
                    Experience the epitome of tailoring excellence, where every stitch tells a story of uncompromising quality and timeless elegance.
                </p>
                <button class="group w-full sm:w-auto px-8 sm:px-12 py-4 border border-white hover:bg-white hover:text-black transition-all duration-500 text-xs tracking-[0.2em] fade-in flex items-center justify-center sm:justify-start gap-4" style="animation-delay: 1.8s">
                    EXPLORE COLLECTION
                    <span class="h-[1px] w-8 bg-current transform transition-transform group-hover:translate-x-2"></span>
                </button>
            </div>
        </div>
    </section>

<div class="overflow-hidden py-4 sm:py-8 bg-white text-black border-y border-black/20">
        <div class="whitespace-nowrap marquee inline-block text-[80px] sm:text-[120px] md:text-[180px] font-light leading-none opacity-90">
            TAILORED EXCELLENCE &nbsp;&nbsp;&nbsp; TAILORED EXCELLENCE &nbsp;&nbsp;&nbsp;
        </div>
    </div>

<section class="py-20 sm:py-40 px-4 sm:px-8">
        <div class="max-w-[2000px] mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 sm:gap-20">
            <div class="space-y-8 sm:space-y-12 self-center">
                <div class="space-y-4">
                    <p class="text-sm tracking-[0.2em] text-white/60">2024 COLLECTION</p>
                    <h2 class="text-4xl sm:text-5xl font-light tracking-wide">AUTUMN /<br/>WINTER</h2>
                </div>
                <p class="text-white/70 leading-relaxed text-base sm:text-lg">
                    Our latest collection embodies the perfect fusion of traditional craftsmanship and contemporary design. Each piece is meticulously crafted to stand the test of time.
                </p>
                <button class="group w-full sm:w-auto text-sm tracking-[0.2em] hover:text-white/50 transition-colors flex items-center justify-center sm:justify-start gap-6">
                    VIEW COLLECTION
                    <span class="h-[1px] w-12 bg-current transform transition-transform group-hover:translate-x-4"></span>
                </button>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <img src="https://images.unsplash.com/photo-1594938328870-9623159c8c99" alt="Suit Detail" class="w-full aspect-[3/4] object-cover hover:scale-[1.02] transition-transform duration-700">
                <img src="https://images.unsplash.com/photo-1598808503746-f34c53b9323e" alt="Suit Detail" class="w-full aspect-[3/4] object-cover sm:mt-20 hover:scale-[1.02] transition-transform duration-700">
            </div>
        </div>
    </section>

Related Examples

Animated Coming Soon Page 1
animated coming soon landing page

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.7k
Chinese

Tanvir Hasan Bappy (Tanvir)

1 year ago

867
card bento

Raul antonio de la cruz hernandez

8 months ago

659
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

SHARIFUL ISLAM

1 year ago

2.3k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

789
HealthLife - Modern Health Solutions
Health & Lifestyle website landing page

Alif Bima Pradana

6 months ago

519
ServerHub Interface

МОЙДОЫР

10 months ago

1.3k
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)

wavy kits

11 months ago

1.4k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

931
About Company Section – Animated & Responsive
A modern "About Us" section built with Tailwind CSS and Alpine.js, designed to highlight your company’s story, achievements, and values through a clean and animated layout. This component features smooth scroll animations, responsive design, and a balanced two-column layout — one for text content and one for an image with company stats. It’s perfect for corporate websites, SaaS platforms, or startup landing pages that want to showcase professionalism and credibility. ✨ Key Features Elegant fade-in and slide-up animations using Alpine.js Responsive grid layout optimized for all screen sizes Dark mode support built-in Dynamic stats display (years, team size, countries served) Clean Tailwind CSS design with easy customization

wavy kits

11 months ago

1.1k
side bar
html css

Hacker Development

1 year ago

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

wavy kits

11 months ago

1.3k