Home
Crimson
Small landing

Small landing

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

Landing Page

Author Crimson

1.7k

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

EduConnect
EduConnect

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

525
Hero Section
Home hero section search bar

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

1 year ago

7.8k
landing page

Author:
Akram Khan

8 months ago

748
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

3 months ago

209
HostelLandingPage

Author:
Ramesh Kumar Sah

5 months ago

741
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

5k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
gallary
html , css

Author:
Hacker Development

10 months ago

844
home
html , css

Author:
Hacker Development

10 months ago

1.9k
PIXEL.DEV | Portfolio
Personal portofolio

Author:
Alif Bima Pradana

22 hours ago

7
neo brutalism page
neo brutalism

Author:
Ti To

1 year ago

2k
Scholar School - Intelligent Generation with Character
Landing page academic website

Author:
Alif Bima Pradana

21 hours ago

4

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components