Newsletter Sections

<section class="newsletter">
    <div class="fui-container py-5">
      <h2 class="mb-0">Newsletter</h2>
      <p class="weight-500">Get timely updates from your favourite products</p>

      <form action="">
        <div class="input-group mt-4">
          <input type="email" name="email" class="fui-input" placeholder="Your Email Address" required>
          <button class="fui-btn"><i class="fa fa-send"></i></button>
        </div>
      </form>

    </div>
 </section>
.newsletter .fui-container {
  border-top: 1px solid #eee;
}

.newsletter .input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

.newsletter .input-group .fui-input {
  border: none;
  height: 30px !important;
}

.newsletter .input-group .fui-input:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.newsletter .input-group .fui-btn {
  padding: 5px 20px;
  border-left: 2px solid #008cff;
  color: #008cff;
}

.newsletter .input-group .fui-btn:hover {
  background: #008cff;
  color: white;
}
Dependencies
CSS

Insert before the closing </head> tag

<!-- Icon Famous -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/icon-famous/1.0.0-beta.2/iconfamous.css">
<!-- Famous UI -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.css">
Javascript

Insert before the closing </body> tag

<!-- jQuery -->
<script src="https://cdn.boomcdn.com/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Famous UI -->
<script src="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.js"></script>