Home

html , css

This tailwind example is contributed by Hacker Development, on 08-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Frequently asked questions, QnA,Front page

Header FAQ Hero Landing Page

Author Hacker Development

Tailwind v3.4 1.4k 4

Fork Fullscreen

<html>

</html>

<head>
  <title>
    Subscribe Now
  </title>
  
  <style>
       body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            background-color: #1a2b3c;
            color: #ffffff;
        }
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }
        .logo {
            display: flex;
            align-items: center;
        }
        .logo img {
            width: 40px;
            margin-right: 10px;
        }
        .nav {
            display: flex;
            gap: 20px;
        }
        .nav a {
            color: #ffffff;
            text-decoration:#f1c40f;
            font-weight: 700;
            opacity: 0.2;
            transition: 1s;
        }
        .nav a:hover{
           opacity:1 ;
            color: #f1c40f;
            
        }
        .subscribe-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 50px;
        }
        .subscribe-text {
            max-width: 50%;
        }
        .subscribe-text h1 {
            font-size: 48px;
            color: #f1c40f;
        }
        .subscribe-text p {
            font-size: 18px;
            margin: 20px 0;
        }
        .subscribe-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .subscribe-form input {
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
        }
        .subscribe-form button {
            padding: 10px;
            background-color: #f1c40f;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
        }
        .subscribe-image {
            position: relative;
        }
        .subscribe-image img {
            border-radius: 20px;
            width: 400px;
        }
            .background-shape {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            border-radius: 20px;
            z-index: -1;
        }
        .icon {
            position: absolute;
            width: 50px;
            height: 50px;
        }
        .icon-1 {
            top: 20px;
            left: 20px;
        }
        .icon-2 {
            bottom: 20px;
            left: 20px;
        }
        .icon-3 {
            top: 20px;
            right: 20px;
        }
  </style>
</head>

<body>
  <div class="container">
    <div class="logo">
      <img src="images.png" alt="">
      <span>
        Creative Marketing
      </span>
    </div>
    <div class="nav">
      <a href="#">
        Home
      </a>
      <a href="#">
        Services
      </a>
      <a href="#">
        Blog
      </a>
      <a href="#">
        About
      </a>
      <a href="#">
        FAQ
      </a>
    </div>
  </div>
  <div class="subscribe-section">
    <div class="subscribe-text">
      <h1>
        Subscribe Now to Our Newsletter
      </h1>
      <p>
        Stay updated with our latest news and offers. Enter your email below to subscribe to our newsletter.
      </p>
      <div class="subscribe-form">
        <input placeholder="Name" type="text" />
        <input placeholder="Email" type="email" />
        <button>
          Subscribe
        </button>
      </div>
    </div>
    <div class="subscribe-image">
      <img src="images.png" alt="">
      <div class="background-shape">
      </div>
    </div>
</body>

</html>

Related Examples

Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.2k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

Amit Pachange

2 years ago

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

Sahil Sasapara

2 years ago

5.6k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.7k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.7k
Hero Beer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.5k