JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select data-bind="options: themeCssOptions, optionsText: 'name', optionsValue: 'css', value: themeCssOption"></select>


<div class="right" data-bind="css: themeCssOption">
  <!-- ko ifnot: chatShow -->
  <div class="chat-prompt" data-bind="click: chatShow">
    <span class="fa fa-comment"></span>
    <h3>Chat to us</h3>
  </div>
  <!-- /ko -->
  <!-- ko ifnot: chatStarted -->
  <div class="chat-container" data-bind="visible: chatShow">
    <header><span class="fa fa-comment"></span> How may we help you?</header>
    <div class="chat-form">
      <div>
        <span>*</span>
        <i class="fa fa-user"></i>
        <input type="text" placeholder="Name" />
      </div>
      <div>
        <span>*</span>
        <i class="fa fa-at"></i>
        <input type="text" placeholder="Email" />
      </div>
    </div>
    <footer>
      <span class="fa fa-comment" data-bind="click: chatStarted"></span>
    </footer>
  </div>
  <!-- /ko -->
  <!-- ko if: chatStarted -->
  <div class="chat-sample" data-bind="visible: chatStarted">
    <div class="chat-prompt">
      <span class="fa fa-comment"></span>
      <h3>You are chatting with Ben</h3>
    </div>
    <div class="agent-message">
      <i class="fa fa-user"></i>
      <span>Hello there, how can I help? </span>
    </div>
    <div class="customer-message">
      <span>Hi, I need to change my direct debit date </span>
    </div>
    <footer>
      <input type="text" placeholder="Enter your message here" />
      <span class="fa fa-paper-plane"></span>
    </footer>
  </div>
  <!-- /ko -->
</div>

SCSS

@mixin formDefaults($height, $padding, $fontFamily, $lineHeight, $width, $radius, $display, $border) {
  height: $height;
  padding: $padding;
  font-family: $fontFamily;
  line-height: $lineHeight;
  width: $width;
  border-radius: $radius;
  display: $display;
  border: $border;
}
@mixin tertiaryColour($tertiaryBackground, $tertiaryColour) {
  background-color: $tertiaryBackground;
  color: $tertiaryColour;
}
@mixin darkTheme( $darkPrimary, $darkfontColour) {
  background-color: $darkPrimary;
  color: $darkfontColour;
}

@mixin lightTheme ($lightPrimary, $lightFontColour ) {
  background-color: $lightPrimary;
  color: $lightFontColour; 
}

@mixin default ($defaultPrimary, $defaultFontColour) {
  background-color: $defaultPrimary;
  color: $defaultFontColour;
}

@mixin defaultIcon {
  border-radius: 50%;
  padding: 5px;
  width: 17px;
  height: 17px;
  text-align: center;
  vertical-align: middle;
  border: 2px solid;
  position: relative;
  left: 2px;
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

@mixin border ($borderColor) {
  border-width: 1px;
  border-color: $borderColor;
  border-style: solid;
}

@include placeholder {
    font-style:italic;
    padding-left: 5px;
}

.right{
  float: right;
}

.hidden {
  display: none;
}
.chat-prompt {
@include formDefaults(43px, 1px, Segoe UI light, 2px, 217px, 32px 0 0 32px,'', 1px solid #ccc);
margin: 10px 0 10px 0;
span {
  @include defaultIcon;
}
h3 {
    display: inline-block;
    padding-left: 3px;
 }
}
.chat-container {  
  header, footer {
   position: relative;   
   span {
     @include defaultIcon;
   }
  }
  header {
    top: 10px;
    left: 10px;
  }
  
  footer {
    height: 30px;
    top: 24%;
    left: 43%;    
  }
  
.chat-form {
  padding: 50px 0 0 20px;
  div {
    i {
      @include defaultIcon;
      z-index: 2;
    }
    
    span {
      color:...

JavaScript

var model = {
  themeCssOptions: ko.observableArray(),
  themeCssOption: ko.observable(),
  chatShow: ko.observable(),
  chatStarted: ko.observable()
};

model.themeCssOptions.push({
  name: 'Dark Theme',
  css: "dark-form"
});

model.themeCssOptions.push({
  name: 'Light Theme',
  css: "light-form"
});

model.themeCssOptions.push({
  name: 'Default Theme',
  css: "default-form"
});

ko.applyBindings(model);