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.3k

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

Travel Landing Page: Australia

Author:
Maxim

10 months ago

2.2k
EduChina
EduChina

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

584
template hero

Author:
Raul antonio de la cruz hernandez

1 month ago

218
landi page template

Author:
Raul antonio de la cruz hernandez

1 month ago

195
gallary
html , css

Author:
Hacker Development

9 months ago

839
Hero Section
Home hero section search bar

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

1 year ago

7.8k
login!!!!
html , css

Author:
Hacker Development

9 months ago

1.2k
Hero

Author:
Aman kumar

2 years ago

7.1k
Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

7 months ago

1.1k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

1 month ago

56
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

7 months ago

1.8k
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

Author:
wavy kits

4 months ago

557

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components