Home
Hacker Development
landing page

landing page

web Design

This tailwind example is contributed by Hacker Development, on 01-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

1.1k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/03/Screenshot-202024-03-10-20103614.png" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
      * {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .header-top {
    display: flex;
    justify-content: center;
    padding: 10px 30px;
    column-gap: 813px;
    align-items: center;
    height: 20px;
    background-color: rgba(255, 20, 145, 0.822);
  }
  
  .header-top .logo {
    display: flex;
    column-gap: 10px;
  }
  
  .header-top .header-item {
    display: flex;
    column-gap: 10px;
  }
  
  .header-top .header-item a {
    text-decoration: none;
    font-size: 20px;
    color: black;
  }
  
  .header {
    display: flex;
    justify-content: center;
    padding: 10px 30px;
    column-gap: 290px;
    align-items: center;
    height: 50px;
    background-color: white;
  }
  
  .header .header-item {
    display: flex;
    column-gap: 30px;
  }
  
  .header .header-item a {
    text-decoration: none;
    font-size: 20px;
    color: black;
  }
  
  .header .header-item .home-btn {
    border-bottom: 2px solid black;
  }
  
  .header .shop-icon {
    display: flex;
    column-gap: 10px;
  }
  
  .header .shop-icon i {
    cursor: pointer;
  }
  
  .home {
    background-image: linear-gradient(299deg, #c2efeb, #baceed);
    background-size: cover;
    height: 465px;
    width: 100%;
  }
  
  .home .slide {
    display: flex;
    column-gap: 5px;
    margin-top: -70px;
    justify-content: center;
    align-items: center;
  }
  
  .home .slide .one {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    border: 1px solid black;
  }
  
  .home .slide .two {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    background: darkgray;
  }
  
  .home .slide span {
    width: 10px;
    cursor: pointer;
    height: 10px;
    border-radius: 50%;
    display: flex;
    background: darkgray;
  }
  
  .home .main-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px;
    padding-top: 80px;
  }
  
  .home .main-sec .left .txt {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
  }
  
  .home .left .txt p {
    font-size: 3rem;
    color: black;
  }
  
  .home .left .txt button {
    padding: 15px 20px;
    border: none;
    width: fit-content;
    box-shadow: rgba(111, 87, 130, 0.32) 0px 12px 30px 0px;
    background-color: rgba(255, 20, 145, 0.822);
    cursor: pointer;
  }
  
  .home .left {
    width: 46vw;
    padding: 30px;
  }
  
  .home .right {
    width: 46vw;
  }
  
  .product-box {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .product-box .main-box {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
  }
  
  .product-box .main-box .box {
    width: 350px;
    height: 360px;
    background-image: linear-gradient(143deg, #c79969, transparent);
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
  }
  
  .product-box .main-box .box .txt {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .product-box .main-box .box .txt button {
    padding: 10px 20px;
    border: none;
    background: white;
    width: fit-content;
    cursor: pointer;
  }
  
  .product-box img {
    width: 450px;
  }
  
  .product-box .main-box .box2 {
    width: 350px;
    height: 360px;
    background-image: linear-gradient(143deg, #7a7b87, transparent);
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
  }
  
  .product-box .main-box .box2 .txt {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .product-box .main-box .box2 .txt button {
    padding: 10px 20px;
    border: none;
    background: white;
    width: fit-content;
    cursor: pointer;
  }
  
  .product-box .head {
    width: 230px;
    margin-left: 116px;
  }
  
  .product-box .main-box .box3 {
    width: 350px;
    height: 360px;
    background-image: linear-gradient(143deg, #75c9c6, transparent);
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
  }
  
  .product-box .main-box .box3 .txt {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .product-box .main-box .box3 .txt button {
    padding: 10px 20px;
    border: none;
    background: white;
    width: fit-content;
    cursor: pointer;
  }
  
  .product-box .box3 .air {
    margin-left: 39px;
    width: 372px;
    margin-top: -65px;
  }
  
  .trending {
    height: 300px;
    /* background-color: #75c9c6; */
    width: auto;
    padding: 30px;
  }
  
  .trending .txt {
    display: flex;
    justify-content: center;
  }
  
  .trending .main-box {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-top: 20px;
  }
  
  .trending .main-box .box {
  
    width: 271px;
    height: 256px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 13px;
  }
  
  .trending .main-box .box img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
  
  .popular {
    height: 850px;
    /* background-color: #75c9c6; */
    width: auto;
    padding: 30px;
  }
  
  .popular .txt {
    display: flex;
    justify-content: center;
  }
  
  .popular .main-box {
    display: flex;
    justify-content: center;
    column-gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    row-gap: 20px;
    height: 820px;
  }
  
  .popular .main-box .box img {
    height: 220px;
  }
  
  .popular .main-box .box {
    padding: 20px;
    width: 255px;
    display: flex;
    flex-direction: column;
    row-gap: 11px;
    background-image: linear-gradient(231deg, #e7eff1, #baffec);
    border-radius: 8px;
  }
  
  .popular .main-box .box .offer p {
    background-color: deeppink;
    color: white;
    width: fit-content;
    padding: 6px 16px;
    font-family: cursive;
    position: absolute;
    margin-top: 18px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  .popular .main-box .box .dis {
    display: flex;
    column-gap: 68px;
    margin-top: 10px;
  }
  
  .popular .main-box .box .clr {
    display: flex;
    column-gap: 10px;
  }
  
  .popular .main-box .box .clr .one {
    width: 15px;
    height: 15px;
    display: flex;
    background: rgb(3, 3, 3);
    border-radius: 50%;
  }
  
  .popular .main-box .box .clr .two {
    width: 15px;
    height: 15px;
    display: flex;
    background: rgb(214, 214, 52);
    border-radius: 50%;
  }
  
  .popular .main-box .box .clr .three {
    width: 15px;
    height: 15px;
    display: flex;
    background: rgb(110, 104, 8);
    border-radius: 50%;
  }
  
  .popular .main-box button {
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .foot-sec {
    height: 300px;
    background-color: whitesmoke;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
  }
  
  .foot-sec .main-txt-box {
    display: flex;
    column-gap: 20px;
    align-items: center;
    justify-content: center;
  }
  
  .foot-sec .main-txt-box .txt1 {
    /* background: red; */
    width: 300px;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
    padding: 20px;
  }
  
  .foot-sec .main-txt-box .txt1 .social i {
    font-size: 20px;
  }
  
  .foot-sec .main-txt-box .txt2 {
    /* background: blue; */
    width: 220px;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
    padding: 20px;
  }
  
  .foot-sec .main-txt-box .txt2 .item {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .foot-sec .main-txt-box .txt2 .item a {
    text-decoration: none;
    color: darkgray;
  }
  
  .foot-sec .main-txt-box .txt3 {
    /* background: orange; */
    width: 220px;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
    padding: 20px;
  }
  
  .foot-sec .main-txt-box .txt3 .item {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .foot-sec .main-txt-box .txt3 .item a {
    text-decoration: none;
    color: darkgray;
  }
  
  .foot-sec .main-txt-box .txt4 {
    /* background: yellowgreen; */
    width: 300px;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
    padding: 20px;
  }
  
  .foot-sec .main-txt-box .txt4 .sub input {
    width: 15vw;
    height: 3vw;
    padding-left: 20px;
  }
  
  .foot-sec .main-txt-box .txt4 p {
    color: darkgray;
  }
  
  .foot-sec .main-txt-box .txt4 .sub i {
    background: white;
    border: 1px solid;
    padding: 12px;
    cursor: pointer;
  }
  
  .copy{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
  
  .copy .deve{
    color: blueviolet;
  }
    </style>
</head>

<body>
  <nav class="header-top">
    <div class="logo">
      <i class="fa-brands fa-facebook"></i>
      <i class="fa-brands fa-youtube"></i>
      <i class="fa-brands fa-twitter"></i>
      <i class="fa-brands fa-square-instagram"></i>
    </div>
    <div class="header-item">
      <p>Free Delivery On Order</p>
      <i class="fa-solid fa-arrow-right"></i>
    </div>
  </nav>
  <nav class="header">
    <div class="logo">
      <h1>DeveloperGTM</h1>
    </div>
    <div class="header-item">
      <a class="home-btn" href="/">Home</a>
      <a href="/">Product</a>
      <a href="/">Contact Us</a>
    </div>

<section class="home">
    <div class="main-sec">
      <div class="left">
        <div class="txt">
          <p>Airponds Collection</p>
          <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quam, vel incidunt ipsum nesciunt.
          </h4>
          <button>Shop Now <i class="fa-solid fa-arrow-right"></i></button>
        </div>
      </div>
      <div class="right">
        <img decoding="async" width="550px" src="airponds-transformed.png" alt="">
      </div>
    </div>
    <div class="slide">
      <span class="one"><span class="two"></span></span>
      <span></span>
      <span></span>
    </div>
  </section>

<section class="product-box">
    <div class="main-box">
      <div class="box">
        <div class="txt">
          <h1>Best TV</h1>
          <p>Lorem ipsum dolor sit amet.</p>
          <button>Shop Now</button>
        </div>
        <img decoding="async" src="tv-transformed.png" alt="">
      </div>

<div class="box2">
        <div class="txt">
          <h1>Speakers</h1>
          <p>Lorem ipsum dolor sit amet.</p>
          <button>Shop Now</button>
        </div>
        <img decoding="async" class="head" src="headphones-transformed.png" alt="">
      </div>

<div class="box3">
        <div class="txt">
          <h1>Airpond</h1>
          <p>Lorem ipsum dolor sit amet.</p>
          <button>Shop Now</button>
        </div>
        <img decoding="async" class="air" src="airpods-pro-2nd-generation-8deGVY7-600-transformed.png" alt="">
      </div>
    </div>
  </section>

<section class="trending">
    <div class="txt">
      <h1>Trending item</h1>
    </div>
    <div class="main-box">
      <div class="box">
        <img decoding="async"
          src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Y2FtZXJhfGVufDB8fDB8fHww"
          alt="">
        <p>Camera</p>
      </div>

<div class="box">
        <img decoding="async"
          src="https://images.unsplash.com/photo-1508614589041-895b88991e3e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGRyb25lfGVufDB8fDB8fHww"
          alt="">
        <p>Drone</p>
      </div>

<div class="box">
        <img decoding="async"
          src="https://images.unsplash.com/photo-1583394838336-acd977736f90?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <p>Headphones</p>
      </div>

<div class="box">
        <img decoding="async"
          src="https://images.unsplash.com/photo-1545454675-3531b543be5d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c3BlYWtlcnxlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <p>Speakers</p>
      </div>
    </div>
  </section>

<section class="popular">
    <div class="txt">
      <h1>Popular Now</h1>
    </div>
    <div class="main-box">
      <div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1567581935884-3349723552ca?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bW9iaWxlfGVufDB8fDB8fHww"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1589003077984-894e133dabab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHNwZWFrZXJzfGVufDB8fDB8fHww"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1700825238268-a29fb711e4dc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8amJsJTIwaGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1593704212686-6d52058fb516?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FtZXJhJTIwbGVuc3xlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YWlycG9kc3xlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1578054041218-5ee0003926dd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3BlYWtlcnxlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://plus.unsplash.com/premium_photo-1683141496040-eeef9702269f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8c3BlYWtlcnxlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1706886271924-d15eb005091d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2FtZXJhJTIwY29sbGVjdGlvbnxlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<section class="foot-sec">
    <div class="main-txt-box">
      <div class="txt1">
        <h1>About Us</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam repellat mollitia possimus necessitatibus vero temporibus, ullam architecto quo. Tempora, ducimus.</p>
        <div class="social">
          <i class="fa-brands fa-facebook"></i>
          <i class="fa-brands fa-youtube"></i>
          <i class="fa-brands fa-twitter"></i>
          <i class="fa-brands fa-square-instagram"></i>
        </div>
      </div>

<div class="txt2">
        <h1>Quick Link</h1>
        <div class="item">
          <a href="/">FAQs</a>
          <a href="/">Find a Store location</a>
          <a href="/">Privacy Policy</a>
          <a href="/">Refund Policy</a>
        </div>
      </div>

<div class="txt3">
        <h1>Quick Link</h1>
        <div class="item">
          <a href="/">FAQs</a>
          <a href="/">Find a Store location</a>
          <a href="/">Privacy Policy</a>
          <a href="/">Refund Policy</a>
        </div>
      </div>

<div class="txt4">
        <h1>Subscribe</h1>
        <p>Lorem ipsum dolor sit, amet.</p>
        <div class="sub">
          <input type="text" placeholder="Enter your email..">
          <i class="fa-solid fa-arrow-right"></i>
        </div>
      </div>
    </div>

</body>

</html>

Related Examples

Coming Soon Countdown Section – Animated & Responsive
A beautifully designed "Coming Soon" landing section built with Tailwind CSS and Alpine.js, perfect for startups, SaaS platforms, and product launches. This component features a live countdown timer, smooth fade-in animations, and floating gradient effects for a futuristic, engaging look. The layout adapts seamlessly to all screen sizes and supports dark mode, creating a professional pre-launch experience that builds anticipation and excitement. ✨ Key Features ⏳ Dynamic countdown timer (days, hours, minutes, seconds) 🎨 Animated gradient orbs for a vibrant background effect 🌙 Dark mode support included 💨 Smooth entrance animations using Alpine.js 📱 Fully responsive design for all devices 🔗 Social media icons to keep your audience connected 💡 Perfect for: Coming Soon or Under Construction pages Product and SaaS pre-launch sites Portfolio or agency landing pages Event or app launch countdowns

Author:
wavy kits

2 months ago

537
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

806
Product Landing Page

Author:
Noob

3 years ago

12.7k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

7 months ago

1.5k
Onepage M3u8 Video Sample

Author:
Sedat Kumcu

1 year ago

1.5k
vav bar
html , css

Author:
Hacker Development

7 months ago

897
Standard Landing Boilerplate

Author:
Hasan AlDoy (McDoy)

11 months ago

1.2k
ChaiCode
ChaiCode

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

893
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

10 months ago

945
Single Page Portfolio

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

11 months ago

2.2k
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

7 months ago

946
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

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components