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

232

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

Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

4 months ago

593
Chinese

Author:
Tanvir Hasan Bappy (Tanvir)

4 days ago

11
login!!!!
html , css

Author:
Hacker Development

1 month ago

195
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

8 months ago

1.4k
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

1 day ago

19
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

2 months ago

736
Travel Landing Page: Australia

Author:
Maxim

3 months ago

935
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

4 months ago

777
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

19.2k
Portfolio Hero Section 4

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

7 months ago

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

3 months ago

822
neo brutalism page
neo brutalism

Author:
Ti To

4 months ago

596

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components