JSFiddle - React, Tailwind, and code Playground

by Girisha Chennura

HTML

<link rel="stylesheet" href="http://ea61ce-test.knolseed.com/assets/tinymce/skins/lightgray/skin.min.css">
<link rel="stylesheet" href="http://ea61ce-test.knolseed.com/assets/application.css">
<div class="padded">
  <div class="box">
    <form class="fill-up">
      <div class="padded carousel-form">
        <div class="row-fluid">
          <div class="span6">
            <input type="text" placeholder="Campaign Name">
          </div>
          <div class="span6">
            <input type="text" placeholder="Campaign Type(Tags)">
          </div>
        </div>
        <div class="row-fluid">
          <div class="span6">
            <input type="text" placeholder="Template">
          </div>
          <div class="span6">
            <input type="text" placeholder="Customer List">
          </div>
        </div>
        <input type="text" placeholder="Subject">
        <textarea rows="7"></textarea>
        <a class="btn btn-info submit-btn left disabled" href="#"><i class="icon-chevron-left"></i></a>
        <div class="submit-btn right">
            <input class="btn btn-success" name="commit" type="submit" value="Next">
            <i class="icon-chevron-right"></i>
        </div>
      </div>
    </form>
  </div>
</div>

SCSS

form.fill-up input, form.fill-up textarea {
    width: 100%;
}

/* include this custom css from here */
.submit-btn input[type="submit"] + i {
    display: none
}

@media (min-width: 767px) and (max-width: 1200px) {
    .padded.carousel-form {
      position: relative;
      padding: 20px 100px;
    
      .button, .submit-btn {
        background: darken(#F1F1F1, 10%);
        border-radius: 3px;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        height: 60px;
        line-height: 20px;
        margin-bottom: 0px;
        padding-bottom: 6px;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 7px;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
        vertical-align: middle;
        width: 14px;
        position: absolute;
        top: 50%;
        margin-top: -37px;
    
        &.left {
          float: left;
          left: 30px;
        }
    
        &.right {
          float: right;
          right: 30px;
        }
    
        &:hover, &:focus {
          background: darken(#F1F1F1, 15%);
        }
    
        &:active {
          background: darken(#F1F1F1, 20%);
        }
    
        &.disabled, &[disabled="disabled"] {
          cursor: not-allowed;
          text-shadow: none;
    
          &, &:hover, &:focus, &:active {
            background: darken(#F1F1F1, 5%);
            border: none;
          }
        }
    
        i {
          font-size: 30px;
          line-height: 60px;
          vertical-align: middle;
          position: relative;
          top: 2px;
        }
      }
    
      .submit-btn {
        padding: 0;
        width: 38px;
        height: 74px;
    
        input[type="submit"] {
          background: rgba(0,0,0,0);
          border: none;
          font-size: 0px;
          box-shadow: none;
          width: 100%;
          height: 100%;
         ...