Home
nii fanny
New Collection

New Collection

A "New Collection" in fashion refers to a series of new garments and accessories designed and released by a designer or brand for a specific season (e.g., Spring/Summer, Fall/Winter). It's a carefully curated selection of items that typically share a common theme, style, or inspiration, reflecting the brand's identity and target audienc

This tailwind example is contributed by nii fanny, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Hero Heading

Author nii fanny

530

Fork Fullscreen

</nav>

<div class="relative bg-pink-100 overflow-hidden">
        <div class="max-w-7xl mx-auto">
            <div class="relative z-10 pb-8 bg-pink-100 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
                <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
                    <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
                        <div class="sm:text-center lg:text-left">
                            <h2 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
                                <span class="block">New Collection</span>
                                <span class="block text-pink-600">Spring 2025</span>
                            </h2>
                            <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
                                Discover our latest arrivals for women and girls. Fresh styles for every occasion.
                            </p>
                            <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
                                <div class="rounded-md shadow">
                                    <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pink-600 hover:bg-pink-700 md:py-4 md:text-lg md:px-10">
                                        Shop Now
                                    </a>
                                </div>
                                <div class="mt-3 sm:mt-0 sm:ml-3">
                                    <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-pink-700 bg-pink-200 hover:bg-pink-300 md:py-4 md:text-lg md:px-10">
                                        View Lookbook
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
            <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="Fashion model">
        </div>
    </div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Shop by Category</h2>
        <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
            <a href="#" class="group relative block bg-gray-100 rounded-lg overflow-hidden">
                <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Women's clothing" class="w-full h-64 object-cover transition-opacity group-hover:opacity-75">
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4">
                    <h3 class="text-xl font-semibold text-white">Women's Clothing</h3>
                    <p class="mt-1 text-sm text-gray-300">Shop Now</p>
                </div>
            </a>
            <a href="#" class="group relative block bg-gray-100 rounded-lg overflow-hidden">
                <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Girls' clothing" class="w-full h-64 object-cover transition-opacity group-hover:opacity-75">
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4">
                    <h3 class="text-xl font-semibold text-white">Girls' Clothing</h3>
                    <p class="mt-1 text-sm text-gray-300">Shop Now</p>
                </div>
            </a>
            <a href="#" class="group relative block bg-gray-100 rounded-lg overflow-hidden">
                <img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80" alt="Women's shoes" class="w-full h-64 object-cover transition-opacity group-hover:opacity-75">
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4">
                    <h3 class="text-xl font-semibold text-white">Women's Shoes</h3>
                    <p class="mt-1 text-sm text-gray-300">Shop Now</p>
                </div>
            </a>
            <a href="#" class="group relative block bg-gray-100 rounded-lg overflow-hidden">
                <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Girls' shoes" class="w-full h-64 object-cover transition-opacity group-hover:opacity-75">
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4">
                    <h3 class="text-xl font-semibold text-white">Girls' Shoes</h3>
                    <p class="mt-1 text-sm text-gray-300">Shop Now</p>
                </div>
            </a>
        </div>
    </div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-4 md:mb-0">Featured Products</h2>
            <div class="flex space-x-4">
                <div class="relative">
                    <select class="appearance-none bg-white border border-gray-300 rounded-md py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-pink-500 focus:border-pink-500">
                        <option>Sort by: Featured</option>
                        <option>Price: Low to High</option>
                        <option>Price: High to Low</option>
                        <option>Newest Arrivals</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                        <i class="fas fa-chevron-down text-xs"></i>
                    </div>
                </div>
                <button class="p-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300">
                    <i class="fas fa-filter"></i>
                </button>
            </div>
        </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            
            <div class="group relative bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" alt="Floral dress" class="w-full h-80 object-cover">
                    <div class="absolute top-2 right-2">
                        <button class="p-2 rounded-full bg-white text-gray-700 hover:bg-pink-100 hover:text-pink-600 transition-colors duration-300">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <span class="text-xs font-semibold text-white">New Arrival</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-sm font-medium text-gray-900">
                                <a href="#">
                                    <span aria-hidden="true" class="absolute inset-0"></span>
                                    Floral Summer Dress
                                </a>
                            </h3>
                            <p class="mt-1 text-sm text-gray-500">Women's Dress</p>
                        </div>
                        <p class="text-sm font-medium text-pink-600">$39.99</p>
                    </div>
                    <div class="mt-4 flex space-x-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">S</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">M</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">L</span>
                    </div>
                    <div class="mt-4">
                        <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors duration-300">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>

<div class="group relative bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Girl's dress" class="w-full h-80 object-cover">
                    <div class="absolute top-2 right-2">
                        <button class="p-2 rounded-full bg-white text-gray-700 hover:bg-pink-100 hover:text-pink-600 transition-colors duration-300">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-sm font-medium text-gray-900">
                                <a href="#">
                                    <span aria-hidden="true" class="absolute inset-0"></span>
                                    Pink Polka Dot Dress
                                </a>
                            </h3>
                            <p class="mt-1 text-sm text-gray-500">Girl's Dress</p>
                        </div>
                        <p class="text-sm font-medium text-pink-600">$29.99</p>
                    </div>
                    <div class="mt-4 flex space-x-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">4-5Y</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">6-7Y</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">8-9Y</span>
                    </div>
                    <div class="mt-4">
                        <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors duration-300">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>

<div class="group relative bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80" alt="Women's shoes" class="w-full h-80 object-cover">
                    <div class="absolute top-2 right-2">
                        <button class="p-2 rounded-full bg-white text-gray-700 hover:bg-pink-100 hover:text-pink-600 transition-colors duration-300">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <span class="text-xs font-semibold text-white">Bestseller</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-sm font-medium text-gray-900">
                                <a href="#">
                                    <span aria-hidden="true" class="absolute inset-0"></span>
                                    White Sneakers
                                </a>
                            </h3>
                            <p class="mt-1 text-sm text-gray-500">Women's Shoes</p>
                        </div>
                        <p class="text-sm font-medium text-pink-600">$49.99</p>
                    </div>
                    <div class="mt-4 flex space-x-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">6</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">7</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">8</span>
                    </div>
                    <div class="mt-4">
                        <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors duration-300">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>

<div class="group relative bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Girl's shoes" class="w-full h-80 object-cover">
                    <div class="absolute top-2 right-2">
                        <button class="p-2 rounded-full bg-white text-gray-700 hover:bg-pink-100 hover:text-pink-600 transition-colors duration-300">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <span class="text-xs font-semibold text-white">Sale</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-sm font-medium text-gray-900">
                                <a href="#">
                                    <span aria-hidden="true" class="absolute inset-0"></span>
                                    Sparkly Sandals
                                </a>
                            </h3>
                            <p class="mt-1 text-sm text-gray-500">Girl's Shoes</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-pink-600">$24.99</p>
                            <p class="text-xs text-gray-500 line-through">$34.99</p>
                        </div>
                    </div>
                    <div class="mt-4 flex space-x-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">1</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">2</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">3</span>
                    </div>
                    <div class="mt-4">
                        <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors duration-300">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div class="mt-12 text-center">
            <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                View All Products
                <i class="fas fa-arrow-right ml-2"></i>
            </button>
        </div>
    </div>

<div class="bg-pink-100">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center">
            <div class="lg:w-0 lg:flex-1">
                <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Sign up for our newsletter
                </h2>
                <p class="mt-3 max-w-3xl text-lg leading-6 text-gray-500">
                    Get the latest updates on new arrivals, special offers, and fashion tips.
                </p>
            </div>
            <div class="mt-8 lg:mt-0 lg:ml-8">
                <form class="sm:flex">
                    <label for="email-address" class="sr-only">Email address</label>
                    <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-pink-500 focus:border-pink-500 sm:max-w-xs rounded-md" placeholder="Enter your email">
                    <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
                        <button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
                            Subscribe
                        </button>
                    </div>
                </form>
                <p class="mt-3 text-sm text-gray-500">
                    We care about your data. Read our
                    <a href="#" class="font-medium text-pink-600 underline">
                        Privacy Policy
                    </a>.
                </p>
            </div>
        </div>
    </div>

<footer class="bg-white">
        <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
            <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
                <div class="px-5 py-2">
                    <a href="#" class="text-base text-gray-500 hover:text-gray-900">
                        About
                    </a>
                </div>
                <div class="px-5 py-2">
                    <a href="#" class="text-base text-gray-500 hover:text-gray-900">
                        Blog
                    </a>
                </div>
                <div class="px-5 py-2">
                    <a href="#" class="text-base text-gray-500 hover:text-gray-900">
                        Jobs
                    </a>
                </div>
                <div class="px-5 py-2">
                    <a href="#" class="text-base text-gray-500 hover:text-gray-900">
                        Press
                    </a>
                </div>
                <div class="px-5 py-2">
                    <a href="#" class="text-base text-gray-500 hover:text-gray-900">
                        Accessibility
                    </a>
                </div>
                <div class="px-5 py-2">
                    <a href="#" class="text-base text-gray-500 hover:text-gray-900">
                        Partners
                    </a>
                </div>
            </nav>
            <div class="mt-8 flex justify-center space-x-6">
                <a href="#" class="text-gray-400 hover:text-pink-600">
                    <span class="sr-only">Facebook</span>
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-pink-600">
                    <span class="sr-only">Instagram</span>
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-pink-600">
                    <span class="sr-only">Twitter</span>
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-pink-600">
                    <span class="sr-only">Pinterest</span>
                    <i class="fab fa-pinterest-p"></i>
                </a>
            </div>
            <p class="mt-8 text-center text-base text-gray-400">
                &copy; 2023 Fashion Haven. All rights reserved.
            </p>
        </div>
    </footer>

<div class="fixed inset-0 overflow-hidden z-50 hidden" id="cart-sidebar">
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
            <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
                <div class="w-screen max-w-md">
                    <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
                        <div class="flex-1 py-6 overflow-y-auto px-4 sm:px-6">
                            <div class="flex items-start justify-between">
                                <h2 class="text-lg font-medium text-gray-900">Shopping cart</h2>
                                <div class="ml-3 h-7 flex items-center">
                                    <button type="button" class="-m-2 p-2 text-gray-400 hover:text-gray-500" id="close-cart">
                                        <span class="sr-only">Close panel</span>
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>

<div class="ml-4 flex-1 flex flex-col">
                                                <div>
                                                    <div class="flex justify-between text-base font-medium text-gray-900">
                                                        <h3>
                                                            Floral Summer Dress
                                                        </h3>
                                                        <p class="ml-4">
                                                            $39.99
                                                        </p>
                                                    </div>
                                                    <p class="mt-1 text-sm text-gray-500">
                                                        Women's Dress - Size M
                                                    </p>
                                                </div>
                                                <div class="flex-1 flex items-end justify-between text-sm">
                                                    <p class="text-gray-500">
                                                        Qty 1
                                                    </p>

<div class="flex">
                                                        <button type="button" class="font-medium text-pink-600 hover:text-pink-500">
                                                            Remove
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

<div class="ml-4 flex-1 flex flex-col">
                                                <div>
                                                    <div class="flex justify-between text-base font-medium text-gray-900">
                                                        <h3>
                                                            White Sneakers
                                                        </h3>
                                                        <p class="ml-4">
                                                            $49.99
                                                        </p>
                                                    </div>
                                                    <p class="mt-1 text-sm text-gray-500">
                                                        Women's Shoes - Size 7
                                                    </p>
                                                </div>
                                                <div class="flex-1 flex items-end justify-between text-sm">
                                                    <p class="text-gray-500">
                                                        Qty 1
                                                    </p>

<div class="flex">
                                                        <button type="button" class="font-medium text-pink-600 hover:text-pink-500">
                                                            Remove
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

<div class="border-t border-gray-200 py-6 px-4 sm:px-6">
                            <div class="flex justify-between text-base font-medium text-gray-900">
                                <p>Subtotal</p>
                                <p>$89.98</p>
                            </div>
                            <p class="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
                            <div class="mt-6">
                                <a href="#" class="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-pink-600 hover:bg-pink-700">
                                    Checkout
                                </a>
                            </div>
                            <div class="mt-6 flex justify-center text-sm text-center text-gray-500">
                                <p>
                                    or
                                    <button type="button" class="text-pink-600 font-medium hover:text-pink-500" id="continue-shopping">
                                        Continue Shopping<span aria-hidden="true"> &rarr;</span>
                                    </button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Related Examples

Hero Section
Home hero section search bar

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

1 year ago

7.8k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

4.2k
Yoga Coach Hero Section

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

1 year ago

5.8k
Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Author:
Augustin

8 months ago

669
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
Registration
used in personal information

Author:
Uwase Alliance

8 months ago

1k
Real Estate Website • Hero Section
polished, professional Hero section

Author:
UI-Templates

3 months ago

404
Text with gradient underline
Gradient Underline Text. Decorate your text with a gradient underline for a modern touch.

Author:
Anonymous

2 years ago

10.8k
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

1 year ago

5.3k
login_form
used for user to logging in

Author:
nii fanny

8 months ago

476
Hero section with bold heading

Author:
Abigail

3 years ago

11.5k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components