JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://shopi-market.mes-jeux.fr/css/boutons.css">
<link rel="stylesheet" href="http://shopi-market.mes-jeux.fr/modal/Demos/assets/css/reset.css">
<link rel="stylesheet" href="http://shopi-market.mes-jeux.fr/modal/Demos/assets/css/demo.css">
<link rel="stylesheet" href="http://shopi-market.mes-jeux.fr/modal/Source/assets/css/simplemodal.css">
<link rel="stylesheet" href="http://shopi-market.mes-jeux.fr/css/notifications.css">
<script src="http://shopi-market.mes-jeux.fr/modal/Demos/assets/javascript/mootools-core-1.3.1.js"></script>
<script src="http://shopi-market.mes-jeux.fr/modal/Demos/assets/javascript/mootools-more-1.3.1.1.js"></script>
<script src="http://shopi-market.mes-jeux.fr/modal/Source/simple-modal.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://shopi-market.mes-jeux.fr/js/mustache.js"></script>
<p>
        <a href="#" data-title="Information" data-content="Ici mes informations sur la notification" style="display:none;" id="info1" class="notif">Notification classique</a>
      </p>
      <p>
        <a href="#" data-title="Information" data-content="Je ne me referme pas ! il faut cliquer ici :)" data-timeout="0" style="display:none;" id="info2" class="notif">Je ne me referme jamais</a>
      </p>
      <p>
        <a href="#" data-title="Confirmation" data-content="ça marche !" data-cls="success" style="display:none;" id="ok" class="notif">Notification de succès</a>
      </p>
      <p>
        <a href="#" data-title="Erreur" data-content="ça marche pas :(" data-cls="error" style="display:none;" id="erreur" class="notif">Notification d'erreur</a>
      </p>
      <p>
        <a href="#" data-title="Information" data-content="ça marche pas :(" data-img="" style="display:none;" id="img" class="notif">Notification avec image</a>
      </p>

<a class="bouton orange large" id="modal-ajax" >Connexion</a>
			<a class="bouton vert large" id="modal-ajax-2"...

JavaScript

// CODE POUR LES NOTIFICATIONS : Début

(function (e){e.notif=function(t){e("body").notif(t)};e.fn.notif=function(t){var n={html:'<div class="notification {{cls}}">          <div class="left">          	{{#icon}}            <div class="icon">              {{{icon}}}            </div>            {{/icon}}            {{#img}}            <div class="img" style="background-image:url({{img}});"></div>            {{/img}}          </div>          <div class="right">            <h2>{{title}}</h2>            <p>{{content}}</p>          </div>        </div>',icon:"<img src='../css/icons/info.png' style='margin-left:-7px;margin-top:-29px;'/>",timeout:3e3};if(t.cls=="error"){n.icon="&#x2716;"}if(t.cls=="success"){n.icon="&#10003;"}var t=e.extend(n,t);return this.each(function(){var n=e(this);var r=e("> .notifications",this);var i=e(Mustache.render(t.html,t));if(r.length==0){r=e('<div class="notifications"/>');n.append(r)}r.append(i);if(t.timeout){setTimeout(function(){i.trigger("click")},t.timeout)}i.click(function(e){e.preventDefault();i.addClass("out").delay(500).slideUp(300,function(){if(i.siblings().length==0){r.remove()}i.remove()})})})};e(".notif").click(function(t){t.preventDefault();e.notif(e(this).data())})})(jQuery)


function clic (typeNotif)
{	
	var evt = document.createEvent("MouseEvents");
	evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
	document.getElementById(typeNotif).dispatchEvent(evt);
}
window.onload = clic('info2'), clic('ok'), clic('erreur');

// CODE POUR LES NOTIFICATIONS : Fin

// CODE POUR LES FENÊTRES MODALES : Début

/*
* Mootools Simple Modal
* Version 1.0
* Copyright (c) 2011 Marco Dell'Anna -
*/
window.addEvent("domready", function(e){
/* Modal Ajax */
  $("modal-ajax" ).addEvent("click", function(e){
    e.stop();
    var SM = new SimpleModal({"btn_ok":"Confirm button", "width":600});
        // Aggiunge Bottone Conferma
        SM.addButton("Confirmer", "confirm-btn", function(){
        ...