JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="bootmetro.css"/>
</head>
<body>
            <a class="btn btn-success" id="test" href="#">Sign In</a>
            <a class="btn btn-warning" id="settings" href="#registration">Sign Up</a>

<div id="charms" class="win-ui-dark slide">
    <div id="theme-charms-section" class="charms-section">
        <div class="charms-header">
            <a type="button" class="btn btn-default btn-lg close-charms win-backbutton"> <</a>
        </div>
         modal window 1
    </div>
</div>

<div id="charms" class="win-ui-dark slide">
    <div id="theme-charms-section" class="charms-section">
        <div class="charms-header">
            <a type="button" class="btn btn-default btn-lg close-charms win-backbutton"> <</a>
        </div>
        modal window 2
    </div>
</div>

<script src="jquery.js"></script>
<script type="text/javascript" src="bootmetro-charms.js"></script>
<script>
    $(function(){
        $("#settings").click(function (e) {
            e.preventDefault();
            $('#charms').charms('showSection', 'theme-charms-section');
        });

        $("#test").click(function (e) {
            e.preventDefault();
            $('#charms').charms('showSection', 'theme-charms-section');
        });
    });
</script>
</body>
</html>

CSS

#charms {
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  width: 320px;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #0072BC;
}

#charms a.win-command {
  display: inline-block;
  padding: 0;
  margin: 0;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  background-clip: border-box;
}

#charms .charms-section {
  margin: 0 40px 40px 40px;
}

#charms a:hover {
  background-color: #216475;
}

#charms .charms-header {
  position: relative;
  padding: 40px 0 30px 0;
}

#charms .charms-header a#pin-charms {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  margin-right: -24px;
  font-size: 11px;
  color: #FFF;
  text-align: center;
}

#charms .charms-header a#pin-charms.active {
  color: #000;
  background-color: #FFF;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

#charms .charms-header h2 {
  display: inline-block;
  margin-left: 10px;
  color: #FFF;
}

#charms hr {
  border: 1px solid #357281;
}

#charms h2,
#charms h3,
#charms h4,
#charms p,
#charms a,
#charms label {
  color: #19BFC9;
}

#charms .charms-header a.win-backbutton {
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 32px;
  vertical-align: top;
}

#charms-body {
  min-width: 350px;
}

#charms.slide {
  right: -320px;
  -webkit-transition: all 0.36s ease;
     -moz-transition: all 0.36s ease;
      -ms-transition: all 0.36s ease;
       -o-transition: all 0.36s ease;
          transition: all 0.36s ease;
}

#charms.slide.in {
  right: 0;
}

JavaScript

/*!
 * jQuery Charms Plugin
 * Original author: @aozora
 * Licensed under the MIT license
 */

;
(function($, window, document, undefined){

   // undefined is used here as the undefined global
   // variable in ECMAScript 3 and is mutable (i.e. it can
   // be changed by someone else). undefined isn't really
   // being passed in so we can ensure that its value is
   // truly undefined. In ES5, undefined can no longer be
   // modified.

   // window and document are passed through as local
   // variables rather than as globals, because this (slightly)
   // quickens the resolution process and can be more
   // efficiently minified (especially when both are
   // regularly referenced in your plugin).

   // Create the defaults once
   var pluginName = 'charms',
       defaults = {
          width: '320px',
          animateDuration: 600
       };

   // The actual plugin constructor

   function Charms(element, options){
      this.element = element;

      // jQuery has an extend method that merges the
      // contents of two or more objects, storing the
      // result in the first object. The first object
      // is generally empty because we don't want to alter
      // the default options for future instances of the plugin
      this.options = $.extend({ }, defaults, options);

      this._defaults = defaults;
      this._name = pluginName;

      this.init();
   }

   Charms.prototype = {
      init: function(){
         // Place initialization logic here
         // You already have access to the DOM element and
         // the options via the instance, e.g. this.element
         // and this.options
         // you can add more functions like the one below and
         // call them like so: this.yourotherfunction(this.element, this.options).
      },

      showSection: function(sectionId, width){
         var w = this.options.width;

         if (width != undefined)
            w = width;

         var transition = $.support.transition &&...