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

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

Animated Coming Soon Page 1
animated coming soon landing page

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

11 months ago

3.6k
side bar
html css

Author:
Hacker Development

3 weeks ago

110
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

7 months ago

1.4k
Home
html , css

Author:
Hacker Development

3 weeks ago

41
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

4k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

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

11.5k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

2 months ago

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

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

11 months ago

6.7k
Hero Section
Home hero section search bar

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

1 year ago

6.5k
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

3 months ago

388
The Future of Web Development
love my product

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

53

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components