JSFiddle - React, Tailwind, and code Playground

by Rijo KP

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<body>
  <div id="container">
    <div id="body">
      <section class="main-content">
        <div class="tableRow">
          <div class="cell leftSide">
            <div id="drop-message"></div>
            <div id="topPart">
              <!-- show this stuff at the top only on mobile -->
              <div class="row mobClubhouseInfo">
                <div class="col-xs-24 col-md-8 col-md-push-16">

                  <a href="http://seller.clubschoicefundraising.com/Account/Register"><img src="http://clubschoicefundraising.com/Content/img/ClubhouseLogo-NEW.png" alt="Clubhouse" class="img-responsive text-center center-block" width="250" /></a>
                </div>
                <div class="col-xs-24 col-md-16 col-md-pull-8">
                  <h1>WHAT CAN <span class="orange">YOU</span> DO?</h1>
                  <p>
                    Join the Clubhouse (Seller Registration) – Each seller enters information about themselves and the fundraiser they are doing. Sellers must be registered in order to participate in special promotional contests. Once the seller is registered, they can participate
                    in sending emails and/or text messages to family and friends regarding their fundraiser. Registration is easy! Click on “Join the Clubhouse”. Complete the required info* and you are registered! If you are already registered, click
                    on “Go To My Clubhouse”.
                  </p>
                  <p class="fpNote">*(Don’t...

CSS

.job-banner {
  display: block;
}

.img-responsive {width: 100%;}

@media only screen and (max-width: 767px) and (min-width: 1px) {
  .job-banner {
    top: 0;
    position: relative;
  }
  #topPart .mobClubhouseInfo,
  #topPart .signpost {
    display: block;
  }
}


/***** header *****/

.loginBtn {
  float: right;
  margin-top: -16px;
  margin-right: 3px;
}

.navbar-header {
  min-width: 320px;
}

.navbar-brand {
  padding: 5px;
}

.navbar-brand .smallChoiceLogo {
  height: 40px;
}

.navbar-brand > img {
  display: inline-block;
}

.navbar-brand span {
  float: right;
  margin-left: 10px;
  margin-top: 7px;
  font-size: 20px;
}

header .row .row {
  margin: 0;
}

header .cart {
  color: #ffffff;
  font-size: 1.5em;
  position: relative;
  bottom: -3px;
  text-decoration: none;
}

header .cart span {
  position: relative;
  bottom: 10px;
  left: 6px;
}

.mobileShop {
  position: relative;
  margin-top: 8px;
  margin-right: 10px;
  float: right;
}

.mobileShop img {
  width: 15px;
}


/***** navigation  ******/

.navbar {
  margin-bottom: 0;
  min-height: 40px;
}

.navbar ul.navbar-nav li #mobileSearch form {
  border: none;
  padding: 0;
  margin-top: 15px;
}

.navbar ul.navbar-nav li #mobileSearch form .btn {
  float: right;
}

.navbar ul.navbar-nav li #mobileSearch form .search {
  right: 0;
}

.navbar #menu li .drop {
  padding-right: 0;
}

.navbar ul.navbar-nav li #mobileSearch input {
  font-size: 1.3em;
  padding: 1px 55px 3px 3px;
}


/***** carousel *****/

.featured {
  margin-top: 47px;
}

.carousel-control .glyphicon-chevron-left {
  left: 20%;
}

.carousel-control .glyphicon-chevron-right {
  right: 20%;
}

.carousel-inner > .item > img {
  width: 100%;
}

.carousel-indicators {
  z-index: 1;
}

.job-banner {
  font-family: 'Prosto One', cursive;
  width: 100%;
  height: 40px;
  position: absolute;
  top: 127px;
  right: 0;
  background-color: #cc0000;
  color: #ffffff;
  text-align: center;
  font-size: 2.6em;
  padding-top: 5px;
  font-weight:...