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

288

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

super cube
complex landing page for super cube created by salvator

Author:
Baraka Salvator

4 weeks ago

188
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

4 months ago

923
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
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.7k
Simple landing page

Author:
Lîmåã M

2 years ago

17.9k
Onepage M3u8 Video Sample

Author:
Sedat Kumcu

6 months ago

964
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

426
Small landing

Author:
Crimson

5 months ago

738
Product Landing Page

Author:
Noob

2 years ago

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

723
home
html , css

Author:
Hacker Development

1 month ago

190
Portfolio Hero Section 4

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

6 months ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components