JSFiddle - React, Tailwind, and code Playground

by Mubasshir Pawle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div id="banner">
  <div class="row">
    <h1>Smart Gadgets</h1>
    <br>
    <p>Turn your devices into you best friend</p>
    <p>Make every moment as your own..</p>
    <br>
    <a href="" class="btn btn-primary btn-lg">GET YOUR DEVICES</a>
  </div>
</div>
<div class="salmon-bg padded">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="card">
          <img src="https://image.flaticon.com/icons/svg/15/15883.svg" width="100px">
          <h3>Smart Phone With Internet</h3>
          <p>Mobile Devices with internet facility can connect with <strong>Internet</strong>. </p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="card">
          <img src="https://image.flaticon.com/icons/svg/123/123400.svg" width="120">
          <h3>Laptop</h3>
          <p>Laptop can be movable anywhere, as it does not require plug-in like desktop.</p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="card">
          <img src="https://image.flaticon.com/icons/svg/124/124121.svg" width="120">
          <h3>Smart Watch</h3>
          <p>It can be used without smart phone as it is an inbuilt smart phone features.</p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="card">
          <img src="https://image.flaticon.com/icons/svg/15/15868.svg" width="120">
          <h3>Smart Phone with Group Chat</h3>
          <p>As it shows in every smart phone we can have a group chat from any location. </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="text-center padded wheat-bg">
  <h2>Get News From Smart Gadgets</h2>
  <p>Leave us your mail and get smart gadgets news.</p>
 ...

CSS

#banner {
     background-image: url("https://udemy-images.udemy.com/course/480x270/582816_efa9.jpg");
     height: 90%;
     background-size: cover;
     padding: 250px 100px;
     top: 85%;
   }

   #banner h1,   #banner h2,   #banner p{
     text-shadow: 1px 1px #ccc;
   }
   .salmon-bg {
     background-color: salmon;
     color: whitesmoke;
   }

   .padded {
     padding-top: 8px;
     padding-bottom: 8px;
   }

   .card {
     padding: 12px;
     font-weight: 300;
   }

   .wheat-bg {
     background-color: wheat;
     color: teal;
     height: 300px;
     padding: 5%;
   }

   #map {
     width: 100%;
     height: 500px;
     position: relative;
     overflow: hidden;
     background-image: url("http://tmb2.cdn18.com/smaps/b0162.png");
   }

   .absolute {
     background-color: white;
     font-weight: 500;
     top: 5px;
     padding: 15px 25px;
     box-sizing: border-box;
     border-radius: 10px;
     position: absolute;
     z-index: 1;
     width: 420px;
     margin: 10px;
     left: 35%;
     border: 1px solid white;
   }

   .closebutton {
     padding: 0px 24px;
     font-size: 14px;
     border-radius: 4px;
     color: blue;
     background-color: whitesmoke;
     cursor: pointer;
     height: 30px;
   }

   #footer {
     background-color: black;
     color: whitesmoke;
     padding: 30px;
   }

   a {
     font-size: 30px;
     padding: 12px;
   }

   a:hover {
     color: tomato;
   }