Home
Umutoniwase Yvette
Markert shop

Markert shop

wellcome tothe my online shoping

This tailwind example is contributed by Umutoniwase Yvette, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Umutoniwase Yvette

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Online Marketing Landing Page</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background-color: #f7f7f7;
      color: #333;
    }
    header {
      background: #0a66c2;
      color: white;
      padding: 60px 20px;
      text-align: center;
    }
    header h1 {
      font-size: 3em;
      margin: 0;
    }
    header p {
      font-size: 1.2em;
      margin-top: 10px;
    }
    .features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 40px 20px;
      background: white;
    }
    .feature {
      flex: 1 1 300px;
      max-width: 300px;
      background: #e9f3ff;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
    }
    .feature h3 {
      margin-top: 0;
      color: #0a66c2;
    }
    .subscribe {
      background: #d9edff;
      padding: 40px 20px;
      text-align: center;
    }
    .subscribe input {
      padding: 10px;
      width: 250px;
      max-width: 80%;
      margin-right: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .subscribe button {
      padding: 10px 20px;
      background: #0a66c2;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .subscribe button:hover {
      background: #084a96;
    }
    footer {
      text-align: center;
      padding: 20px;
      background: #333;
      color: white;
    }
  </style>
</head>
<body>

<header>
    <h1>Boost Your Business Online</h1>
    <p>Reach thousands of customers with powerful digital marketing tools</p>
  </header>

<section class="features">
    <div class="feature">
      <h3>SEO Optimization</h3>
      <p>Get found on Google and improve your search engine rankings.</p>
    </div>
    <div class="feature">
      <h3>Social Media Ads</h3>
      <p>Target the right audience with optimized Facebook and Instagram ads.</p>
    </div>
    <div class="feature">
      <h3>Email Campaigns</h3>
      <p>Send professional emails that convert leads into loyal customers.</p>
    </div>
  </section>

<section class="subscribe">
    <h2>Join Our Newsletter</h2>
    <p>Stay updated with the latest tips & offers</p>
    <form id="subscribeForm">
      <input type="email" id="email" placeholder="Enter your email" required />
      <button type="submit">Subscribe</button>
    </form>
  </section>

<footer>
    &copy; 2025 Online Marketing Co. All rights reserved.
  </footer>

Related Examples

Transparent Navbar

Author:
Rajesh Maheshwari

5 months ago

1.4k
Active Beauty Main Page

Author:
Maxim

4 months ago

666
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

Author:
nii fanny

2 months ago

601
tradition music
by salvator

Author:
Baraka Salvator

2 months ago

455
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

2 months ago

184
home
html , css

Author:
Hacker Development

3 months ago

986
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

6 months ago

1.5k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

8 months ago

3.3k
NFT Header with Hero

Author:
Abdul Baset Bappy

2 months ago

346
vanessa
nice

Author:
Umutoniwase Yvette

2 months ago

294
Hero Section
Home hero section search bar

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

1 year ago

6.9k
No one
nice

Author:
Umutoniwase Yvette

2 months ago

218

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components