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

485

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

Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

2 months ago

460
Onepage M3u8 Video Sample

Author:
Sedat Kumcu

4 months ago

893
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Anonymous

9 months ago

1.7k
Coming Soon Page
Modern , gradient coming soon page

Author:
Rajesh Maheshwari

1 month ago

187
Simple app landing page with video preview

Author:
Prajwal Hallale

2 years ago

10k
Simple app landing page

Author:
Prajwal Hallale

2 years ago

9k
Landing page

Author:
Freja Jensen

2 years ago

12.3k
Travel Landing Page: Australia

Author:
Maxim

4 weeks ago

567
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

2 months ago

389
Hero

Author:
Hasan AlDoy (McDoy)

2 months ago

821
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

6 months ago

1.3k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

3 weeks ago

320

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components