home

html , css

This tailwind example is contributed by Hacker Development, on 10-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Front page

Landing Page

Author Hacker Development

956

Fork Fullscreen

<div class="h-screen w-full overflow-y-scroll bg-black dark:bg-gray-200">
    <nav
        class="w-full sm:w-10/12 lg:w-8/12 mx-auto relative z-10 flex items-center justify-between dark:bg-white bg-black/80 md:mt-10 py-4 text-white dark:text-black border-b border-green-600/20 dark:border-green-600/20 shadow-lg shadow-green-400/20">
        
        <div class="flex-shrink-0 px-4">
            <a href="#" class="text-xl font-bold text-gray-700">
                <span class="px-1 bg-green-400 rounded-full animate-[ping_1.9s_linear_infinite]">S</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2s_linear_infinite]">A</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2.1s_linear_infinite]">M</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2.2s_linear_infinite]">U</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2.3s_linear_infinite]">E</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2.4s_linear_infinite]">L</span>
            </a>
        </div>
        <ul
            class="hidden text-lg md:flex w-1/2 items-center justify-between gap-4 py-2 cursor-pointer md:px-10 border-r-2 border-l-2 border-gray-800 dark:border-gray-300">
            <li class="rounded-b border-b-[3px] border-green-600">Home</li>
            <li class="rounded-b hover:border-b-[3px] hover:border-green-600">Service</li>
            <li class="rounded-b hover:border-b-[3px] hover:border-green-600">About</li>
            <li class="rounded-b hover:border-b-[3px] hover:border-green-600">Pricing</li>
        </ul>

<button class="block md:hidden text-3xl pr-4" id="nav__toggle-open">
                <i class="uil uil-bars"></i>
            </button>
        <button class="hidden md:hidden text-3xl pr-4" id="nav__toggle-close">
                <i class="uil uil-multiply"></i>
            </button>

<ul id="mobile-nav"
            class="hidden md:hidden sm:w-full w-[98%] mx-auto absolute top-[4rem] left-0 right-0 w-full flex-col items-center gap-4 bg-black dark:bg-white rounded-b cursor-pointer shadow shadow-green-600">
            <li class="p-2 rounded shadow shadow-green-600">Home</li>
            <li class="p-2 rounded hover:shadow hover:shadow-green-600">Service</li>
            <li class="p-2 rounded hover:shadow hover:shadow-green-600">About</li>
            <li class="p-2 rounded hover:shadow hover:shadow-green-600">Pricing</li>
            <li class="p-2 rounded hover:shadow hover:shadow-green-600">
                <button class="flex justify-start">
            <a href="mailto:samuelabera87@gmail.com"
                class="bg-green-600 text-white px-6 py-2 rounded-md relative overflow-hidden group">
                <span
            class="absolute top-0 left-0 w-full h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-0 transition duration-500"
          ></span>
                <span class="relative z-10 font-bold text-gray-800">Hire Me</span>
            </a>
        </button>
            </li>
        </ul>

</nav>

<div
        class="w-[90%] md:w-[88%] mx-auto flex gap-6 items-center text-white dark:text-black justify-between pb-20 mt-12 md:mt-24">
        
        <div class="w-full flex flex-col gap-6 py-10 md:py-0">
            <h1 class="xl:text-7xl lg:text-6xl md:text-5xl text-4xl font-semibold">Hi there, I am</h1>
            <h1 class="xl:text-7xl lg:text-6xl md:text-5xl text-4xl font-semibold text-green-600">Samuel Abera!</h1>

<p class="sm:text-lg text-md">Experienced full-stack developer with 5+ years of expertise in
                Laravel, NestJS and
                Nuxt.js experience.</p>
            <div class="flex gap-2">
                
                <a href="mailto:samuelabera87@gmail.com"
                    class="bg-green-600 text-white px-6 py-2 rounded-md relative overflow-hidden group">
                    <span
            class="absolute top-0 left-0 w-full h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-0 transition duration-500"
          ></span>
                    <span class="relative z-10 font-bold text-gray-800">Hire Me</span>
                </a>
                
                <button class="relative text-gray-200 dark:text-black px-6 py-2 rounded-md overflow-hidden group">
                    <span class="absolute inset-0 bg-green-600 transform -translate-x-full group-hover:translate-x-0 transition duration-300"
          ></span>
          <span class="relative z-10 font-bold group-hover:text-gray-800">Latest Projects</span>
                </button>
            </div>

<div class="flex items-center sm:gap-10 gap-6">
                <div class="flex flex-col gap-1">
                    <h4 class="text-xl sm:text-3xl font-bold">5 <sup class="font-bold -ml-1">+</sup>
                    </h4>
                    <p class="text-sm sm:text-base text-gray-300 dark:text-gray-800">Years Expireance</p>
                </div>
                <div class="flex flex-col gap-1">
                    <h4 class="text-xl sm:text-3xl font-bold">77+</h4>
                    <p class="text-sm sm:text-base text-gray-300 dark:text-gray-800">Projects Completed</p>
                </div>
                <div class="flex flex-col gap-1">
                    <h4 class="text-xl sm:text-3xl font-bold">98%</h4>
                    <p class="text-sm sm:text-base text-gray-300 dark:text-gray-800">Faster Project Delivery</p>
                </div>
            </div>
        </div>

<div class="xl:w-1/2 w-full flex items-center justify-center hidden lg:block">
            <div class="relative bg-black border border-none dark:border-gray-300 rounded-lg p-2 dark:bg-white">
                <img class="h-[80%] object-center object-cover" src="https://techakim.com/sam/tg/7268/li/imgs/2.png" alt="Portfolio Image" />
                
                <div
                    class="absolute bg-green-600 text-gray-800 shadow-md shadow-green-600 animate-bounce px-2 py-1 rounded top-10 -left-10 border border-gray-400 z-10">
                    <div class="flex gap-1 items-center">
                        <svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="mobile">
                            <path fill="#88a1ba"
                                d="M37 32H5c-1.1 0-2-.9-2-2V10c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v20c0 1.1-.9 2-2 2z">
                            </path>
                            <path fill="#f7f7fb" d="M37 32H5c-1.1 0-2-.9-2-2v-4h36v4c0 1.1-.9 2-2 2z"></path>
                            <path fill="#444a54"
                                d="M24 41h-6a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-5-2h4v-6h-4v6z">
                            </path>
                            <path fill="#f7f7fb" d="M18 32h6v8h-6z"></path>
                            <circle cx="21" cy="29" r="1" fill="#444a54"></circle>
                            <path fill="#444a54"
                                d="M37 7H5c-1.654 0-3 1.346-3 3v20c0 1.654 1.346 3 3 3h12v6h-5.5a1 1 0 0 0 0 2h19a1 1 0 1 0 0-2H25v-6h12c1.654 0 3-1.346 3-3V10c0-1.654-1.346-3-3-3zM4 10c0-.551.449-1 1-1h32c.552 0 1 .449 1 1v15H4V10zm19 29h-4v-6h4v6zm15-9c0 .551-.448 1-1 1H5c-.551 0-1-.449-1-1v-3h34v3z">
                            </path>
                            <path fill="#f7f7fb"
                                d="M43 40h-8a2 2 0 0 1-2-2V20a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2z"></path>
                            <path fill="#88a1ba" d="M33 22h12v14H33z"></path>
                            <path fill="#444a54"
                                d="M43 17h-8c-1.654 0-3 1.346-3 3v18c0 1.654 1.346 3 3 3h8c1.654 0 3-1.346 3-3V20c0-1.654-1.346-3-3-3zm-9 6h10v12H34V23zm0-3c0-.551.448-1 1-1h8c.552 0 1 .449 1 1v1H34v-1zm10 18c0 .551-.448 1-1 1h-8c-.552 0-1-.449-1-1v-1h10v1z">
                            </path>
                        </svg>
                        <h3 class="font-bold">Full--Stack Web   Dev't</h3>
                    </div>
                </div>
                
                <div
                    class="absolute bg-green-600 text-gray-800 shadow-md shadow-green-600 animate-bounce px-2 py-1 rounded top-1/2 -right-14 border border-gray-400 z-10">
                    <div class="flex gap-1 items-center">
                        <svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="ai-mind">
                            <path fill="#57a4ff"
                                d="M80.25,63.75v184l1.86,2.06a34.676,34.676,0,0,0-1.86,4,35.29,35.29,0,0,0-2.05,17.94,33.74,33.74,0,0,0,.71,3.63,35.291,35.291,0,0,0-35.25,53.87,35.277,35.277,0,0,0,0,68.89,35.334,35.334,0,0,0,35.25,53.87,35.346,35.346,0,0,0,65.22,25.72,35.338,35.338,0,0,0,65.21-25.72,35.415,35.415,0,0,0,37.53-19.99c0-.01.01-.01.01-.02.05-.09.08-.2.13-.29l.04.04h201.2v-368Zm336,336h-168l-1.71-2.11a35.271,35.271,0,0,0-1.95-68.39,35.3,35.3,0,0,0-35.25-53.87,35.768,35.768,0,0,0,1.08-8.71,35.344,35.344,0,0,0-66.29-17.02,35.351,35.351,0,0,0-30.97-18.27c-.3,0-.61,0-.91.01V95.75h304Z">
                            </path>
                            <path fill="#004fac"
                                d="M105.141 326.806c-6.9-.425-13.525 3.44-20.153 11.755a84.01 84.01 0 00-9.41-5.716 8 8 0 00-7.168 14.3 78.124 78.124 0 0114.569 10.088C88.919 362.487 96 370.7 96 380a8 8 0 0016 0c0-12.728-6.914-23.308-14.719-31.206 4.036-5.154 6.362-5.908 6.807-6a3.475 3.475 0 01.844.955 1.564 1.564 0 01-.087-.166l14.31-7.156C118.693 335.5 114.376 327.381 105.141 326.806zM187.5 350.192a14.762 14.762 0 015.86-1.186c2.177.076 4.961.762 7.324 5.276C187.933 365.643 184 381.713 184 391a7.981 7.981 0 007.955 7.977H192a8.02 8.02 0 008-7.933c.012-1.057.583-25.943 25.94-32.283a8 8 0 00-3.88-15.522 55.321 55.321 0 00-7.776 2.557c-8.736-15.305-24.86-14.452-33.862-9.951a8 8 0 007.081 14.347z">
                            </path>
                            <path fill="#004fac"
                                d="M496,168a8,8,0,0,0,8-8V112a8,8,0,0,0-8-8H456V64a8,8,0,0,0-8-8H408V16a8,8,0,0,0-8-8H352a8,8,0,0,0-8,8V56H296V16a8,8,0,0,0-8-8H240a8,8,0,0,0-8,8V56H184V16a8,8,0,0,0-8-8H128a8,8,0,0,0-8,8V56H80a8,8,0,0,0-8,8v40H32a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8H72v48H32a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8H42.7a43.316,43.316,0,0,0-10.15,44.98,43.284,43.284,0,0,0,0,78.04,43.342,43.342,0,0,0,37.22,57.61v.44A43.3,43.3,0,0,0,144,491.37a43.3,43.3,0,0,0,74.23-30.3v-.44A42.941,42.941,0,0,0,232,457.14V480a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V440h48v40a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V440h40a8,8,0,0,0,8-8V392h40a8,8,0,0,0,8-8V336a8,8,0,0,0-8-8H456V280h40a8,8,0,0,0,8-8V224a8,8,0,0,0-8-8H456V168Zm-40-48h32v32H456ZM360,24h32V56H360ZM248,24h32V56H248ZM136,24h32V56H136ZM40,152V120H72v32Zm0,112V232H72v21.25A42.968,42.968,0,0,0,69.88,264Zm95.95,211.95a27.294,27.294,0,0,1-49.73-19.81,39.024,39.024,0,0,0,20-23.68,8,8,0,1,0-15.34-4.56,23.01,23.01,0,0,1-21.93,16.34c-.25,0-.5.02-.75.04a27.313,27.313,0,0,1-17.83-41.51,7.989,7.989,0,0,0-5.01-12.12,27.305,27.305,0,0,1,0-53.3,7.989,7.989,0,0,0,5.01-12.12A27.313,27.313,0,0,1,68.2,283.72c.25.02.5.04.75.04A23.01,23.01,0,0,1,90.88,300.1a8.018,8.018,0,0,0,7.67,5.72,8.218,8.218,0,0,0,2.28-.33,8.005,8.005,0,0,0,5.39-9.95,39.024,39.024,0,0,0-20-23.68,27.286,27.286,0,0,1,23.97-32.07A8.3,8.3,0,0,0,112,240a8,8,0,0,0,2.25-.33,27.329,27.329,0,0,1,21.7,12.38ZM120,224.2V104H408V392H269.64a43.186,43.186,0,0,0-14.19-67.02,43.342,43.342,0,0,0-37.22-57.61v-.44A43.3,43.3,0,0,0,144,236.63,43.374,43.374,0,0,0,120,224.2ZM237.63,402.77a27.315,27.315,0,0,1-17.77,41.5c-.18-.01-.35-.03-.52-.03A23.013,23.013,0,0,1,197.4,427.9a8,8,0,0,0-15.34,4.56,39.02,39.02,0,0,0,19.7,23.53,27.67,27.67,0,0,1,.47,5.08,27.3,27.3,0,0,1-50.28,14.74V252.19a27.3,27.3,0,0,1,50.28,14.74,27.67,27.67,0,0,1-.47,5.08,39.02,39.02,0,0,0-19.7,23.53,8.005,8.005,0,0,0,5.39,9.95,8.218,8.218,0,0,0,2.28.33,8.018,8.018,0,0,0,7.67-5.72,23.013,23.013,0,0,1,21.94-16.34c.17,0,.34-.02.52-.03a27.315,27.315,0,0,1,17.77,41.5,7.989,7.989,0,0,0,5.01,12.12,27.305,27.305,0,0,1,0,53.3,7.989,7.989,0,0,0-5.01,12.12ZM280,472H248V445.02a42.309,42.309,0,0,0,3.58-5.02H280Zm112,0H360V440h32Zm48-48H257.43a43.443,43.443,0,0,0-.56-16H416a8,8,0,0,0,8-8V96a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8V224.6a43.09,43.09,0,0,0-16,7.06V72H440Zm48-80v32H456V344Zm0-112v32H456V232Z">
                            </path>
                        </svg>
                        <h3 class="font-bold">AI & Machine Learning</h3>
                    </div>
                </div>

<div
                    class="absolute bg-green-600 text-gray-800 shadow-md shadow-green-600 animate-bounce px-2 py-1 rounded bottom-20 -left-14 border border-gray-400 z-10">
                    <div class="flex gap-1 items-center">
                        <svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="setting-mobile">
                            <g>
                                <path fill="#9fdbf3" d="M11 7h26v34H11z"></path>
                                <path fill="#b2e5fb" d="M14 7v9a23 23 0 0 0 23 23c.1 0 0 1.2 0-32Z"></path>
                                <path fill="#374f68" d="M37 3v4H11V3a2 2 0 0 1 2-2h22a2 2 0 0 1 2 2Z"></path>
                                <path fill="#425b72" d="M37 3v2H18a4 4 0 0 1-4-4h21a2 2 0 0 1 2 2Z"></path>
                                <path fill="#374f68" d="M37 41v4a2 2 0 0 1-2 2H13a2 2 0 0 1-2-2v-4Z"></path>
                                <path fill="#425b72" d="M37 41v4H18a4 4 0 0 1-4-4Z"></path>
                                <path fill="#edebf2"
                                    d="M27 5h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zm-2 40h-2a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM17 5a1 1 0 0 1-.38-1.92A1 1 0 1 1 17 5z">
                                </path>
                                <path fill="#db5669"
                                    d="M33 25.5v-3l-2.31-.58a7.59 7.59 0 0 0-.49-1.17l1.22-2.05-2.12-2.12-2.05 1.22a7.59 7.59 0 0 0-1.17-.49L25.5 15h-3l-.58 2.31a7.59 7.59 0 0 0-1.17.49l-2.05-1.22-2.12 2.12 1.22 2.05a7.59 7.59 0 0 0-.49 1.17L15 22.5v3l2.31.58a7.59 7.59 0 0 0 .49 1.17l-1.22 2.05 2.12 2.12 2.05-1.22a7.59 7.59 0 0 0 1.17.49L22.5 33h3l.58-2.31a7.59 7.59 0 0 0 1.17-.49l2.05 1.22 2.12-2.12-1.22-2.05a7.59 7.59 0 0 0 .49-1.17ZM24 27a3 3 0 1 1 3-3 3 3 0 0 1-3 3Z">
                                </path>
                                <path fill="#f26674"
                                    d="M33 25.5v-3l-2.31-.58a7.59 7.59 0 0 0-.49-1.17l1.22-2.05-2.12-2.12-2.05 1.22a7.59 7.59 0 0 0-1.17-.49L25.5 15h-3l-.58 2.31c-1.64.52-.65.8-2.43-.26A9 9 0 0 0 26 30.94c.11-.47-.15 0 1.23-.74l2.05 1.22 2.12-2.12-1.2-2.05a7.59 7.59 0 0 0 .49-1.17ZM24 27a3 3 0 1 1 3-3 3 3 0 0 1-3 3Z">
                                </path>
                                <path
                                    d="M35 0H13a3 3 0 0 0-3 3v42a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3ZM12 8h24v32H12Zm0-5a1 1 0 0 1 1-1h22a1 1 0 0 1 1 1v3H12Zm24 42a1 1 0 0 1-1 1H13a1 1 0 0 1-1-1v-3h24Z">
                                </path>
                                <path
                                    d="M27 3h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zm-4 42h2a1 1 0 0 0 0-2h-2a1 1 0 0 0 0 2zM17.92 3.62A1 1 0 1 0 17 5a1 1 0 0 0 .92-1.38zM24 20a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm0 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2z">
                                </path>
                                <path
                                    d="M33.24 21.53c-2.08-.52-1.74-.35-1.91-.73 1-1.58 1.47-2.15.8-2.81-2.16-2.16-2.49-2.78-3.34-2.27-1.84 1.1-1.49 1-1.87.83-.45-1.78-.48-2.55-1.42-2.55-3.06 0-3.73-.2-4 .76-.52 2.08-.35 1.74-.73 1.91-1.58-1-2.15-1.47-2.81-.8-2.16 2.16-2.78 2.5-2.27 3.34 1.11 1.85 1 1.48.83 1.87-1.78.45-2.55.48-2.55 1.42 0 3.06-.2 3.73.76 4 2.08.52 1.74.35 1.91.73-1 1.58-1.47 2.15-.8 2.81 2.16 2.16 2.5 2.78 3.34 2.27 1.84-1.1 1.49-1 1.87-.83.45 1.78.48 2.55 1.42 2.55 3.05 0 3.73.2 4-.76.52-2.08.35-1.74.73-1.91 1.58 1 2.15 1.47 2.81.8 2.16-2.16 2.78-2.5 2.27-3.34-1.1-1.84-1-1.49-.83-1.87 1.78-.45 2.55-.48 2.55-1.42 0-3.06.2-3.76-.76-4ZM32 24.72c-1.67.42-2.07.41-2.27 1.06-.59 1.9-1 .93.44 3.37l-1 1c-1.49-.9-1.76-1.18-2.36-.86-1.76.92-1.39 0-2.07 2.69h-1.46c-.42-1.67-.41-2.07-1.06-2.27-1.9-.59-.92-1-3.37.44l-1-1c.9-1.49 1.18-1.76.86-2.36-.92-1.76 0-1.39-2.69-2.07v-1.44c1.64-.41 2.06-.4 2.27-1.06.59-1.9 1-.92-.44-3.37l1-1c1.48.89 1.76 1.18 2.36.86 1.76-.93 1.39 0 2.07-2.69h1.44c.42 1.67.41 2.07 1.06 2.27 1.9.59.92 1 3.37-.44l1 1c-.87 1.45-1.18 1.74-.86 2.36.92 1.76 0 1.39 2.69 2.07Z">
                                </path>
                            </g>
                        </svg>
                        <h3 class="font-bold">Mobile App Dev't</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

const nav = document.getElementById('mobile-nav');
        const openNavBtn = document.getElementById('nav__toggle-open');
        const closeNavBtn = document.getElementById('nav__toggle-close');

openNavBtn.addEventListener('click', () => {
            nav.classList.remove('hidden');
            openNavBtn.classList.add('hidden');
            closeNavBtn.classList.remove('hidden');
        });

closeNavBtn.addEventListener('click', () => {
            nav.classList.add('hidden');
            openNavBtn.classList.remove('hidden');
            closeNavBtn.classList.add('hidden');
        });
</script>

Related Examples

Login Form
Login Form With google icon

Author:
Md. Tofayel islam

9 months ago

1.4k
Simple landing page

Author:
Lîmåã M

2 years ago

18.9k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

3 weeks ago

41
ChinaEdu
ChinaEdu

Author:
Tanvir Hasan Bappy (Tanvir)

3 months ago

176
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

4 months ago

1.3k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

8.1k
Hero

Author:
Hasan AlDoy (McDoy)

9 months ago

1.4k
Animated Coming Soon Page 1
animated coming soon landing page

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

1 year ago

4k
gallary
html , css

Author:
Hacker Development

5 months ago

516
Hero_Page
#heropage #landingpage

Author:
Rupesh

3 months ago

274
landing page
web Design

Author:
Hacker Development

6 months ago

1k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components