JSFiddle - React, Tailwind, and code Playground

by Luong Dung

HTML

<div class="container">
  <div class="class1">
    class1
  </div>
  <div class="class2">
    <p>
      class2
    </p>
  </div>
</div>
<div class="r class1">
  Out class 1
</div>

SCSS

$width: 20px;
$bg: #00c8d2;
$cl: #fff;
@mixin borders($n){
  border: $n solid #0034de;
}
.container {
  background-color: $bg;
  @include borders(3px);
  .class1 {
    color: $cl;
   &:hover{
    color: #00ed12;
  }
  }
  
}
  .r.class1{
   @extend .container; 
    color: #fff;
  }

JavaScript

( function($){
  $.fn.dung = function(values){
    var settings = $.extend({
      v_color: "#0ffedd",
      v_bg: "#11de06",
      v_bold: "900"
    }, values);
     return this.each(function(){
    $(this).css({"color":settings.v_color,
              "background-color":settings.v_bg, 
              "font-weight":settings.v_bold
             });
  });
  };
})(jQuery);

$(document).ready(function(){
  $('.class2').click(function(){
    $(this).dung({
      v_bold: "500",
      v_color: "#fff",
    });
  })
});