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

Shrinkable Header
A shrinkable header with responsive menu using a little bit of plain javascript

Author:
farid

6 months ago

796
Coffee
custom

Author:
Rebecca IRANKUNDA

4 weeks ago

43
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

10 months ago

1.5k
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

11.8k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

2 weeks ago

283
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

222
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

4 months ago

1.6k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

6 months ago

2.7k
Responsive Header
Beautiful responsive header component

Author:
Rajesh Maheshwari

3 months ago

848
vanessa
nice

Author:
Umutoniwase Yvette

1 month ago

112
vav bar
html , css

Author:
Hacker Development

1 month ago

150
Hero

Author:
Aman kumar

1 year ago

6.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components