JSFiddle - React, Tailwind, and code Playground

by Mehmet Doğan

HTML

<body>
    <div style="border:2px solid red">
        <div class="navigation">
            <ul class="navigation-list">
                <li><a href="homePage.html">Logo</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown-menu">
                    <a href="#" class="drop-button">Service</a>
                    <div class="dropdown-content">
                        <a href="#">Leatherworking</a>
                        <a href="#">Mining</a>
                        <a href="#">Gathering</a>
                        <a href="#">Tailor</a>
                    </div>
                </li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Log out</a></li>

            </ul>

        </div><!--.header-->

        <div class="left-column clear-left">
            <p>Hello,</p>
            <p class="info-tooltip">
                We create good ideas that have never been thought
                <span class="tooltip-text">For more information, look through services</span>
            </p>
            <div>
                "Man is still the most extraordinary computer of all."<br />
                <a href=http://www.brainyquote.com/quotes/authors/j/john_f_kennedy.html target="_blank">Click To Read more from JFK</a>
            </div>

        </div><!--.left-column-->

        <div class="front-content ">
            <h1 style="text-align:center">Test Box</h1>
            <p style="text-align:center"> We will test all loading bars here  </p>

            <button id="first">Click Me! </button>
            <div id="waiting" style="display:none">
                <div class="vanishing-dots"></div>
            </div>


        </div><!--.front-content-->

        <div class="front-content  ">
            <form>
                <label for="name">Full Name : </label>
                <input type="text" id="name" />
                <label for="gender">Gender :...

CSS

@charset "UTF-8";
/*! Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@font-face{font-family:'FontAwesome';src:url("../font-awesome-4.6.3/fonts/fontawesome-webfont.eot?v=4.6.3");src:url("../font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3") format("embedded-opentype"),url("../font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3") format("woff2"),url("../font-awesome-4.6.3/fonts/fontawesome-webfont.woff?v=4.6.3") format("woff"),url("../font-awesome-4.6.3/fonts/fontawesome-webfont.ttf?v=4.6.3") format("truetype"),url("../font-awesome-4.6.3/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular") format("svg");font-weight:normal;font-style:normal;}.spinning-awesome{display:inline-block;font:normal normal normal 3em FontAwesome;text-align:center;color:#fff;text-rendering:auto;width:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-ms-animation:spinning-awesome-spin 1.2s infinite normal steps(8);-webkit-animation:spinning-awesome-spin 1.2s infinite normal steps(8);-o-animation:spinning-awesome-spin 1.2s infinite normal steps(8);-moz-animation:spinning-awesome-spin 1.2s infinite normal steps(8);animation:spinning-awesome-spin 1.2s infinite normal steps(8);}.spinning-awesome:before{content:"";}@-ms-keyframes spinning-awesome-spin{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(359deg);}}@-webkit-keyframes spinning-awesome-spin{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(359deg);}}@-o-keyframes spinning-awesome-spin{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(359deg);}}@-moz-keyframes spinning-awesome-spin{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(359deg);}}@keyframes spinning-awesome-spin{0%{transform:rotate(0deg);}100%{transform:rotate(359deg);}}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}@-ms-keyframes...

JavaScript

$(document).ready(function () {
            $("#second").click(function () {
                $.ajax({
                    beforeSend: function(){
                        $('#loadCompCountry').css("display", "block");
                    },
                    complete: function(){
                        $('#loadCompCountry').css("display", "none");
                    },
                    type: "GET",
                    url: "testAja.xml",
                    dataType: "xml",
                    success: function (xml) {
                        $("#CompCountry").append("<ul></ul>");
                        $(xml).find('CD').each(function () {
                            var cdCountry = $(this).find('COUNTRY').text();
                            var cdComp = $(this).find('COMPANY').text();
                            $("<li></li>").html(cdCountry + ' , ' + cdComp).appendTo("#CompCountry");
                        });
                    },
                    error: function () {
                        alert("top req ");
                    }
                });    
            });

            $("#third").click(function () {
               $.ajax({
                   beforeSend: function(){
                       $("#loadTitleArtist").css("display", "block");
                   },
                   complete: function(){
                       $("#loadTitleArtist").css("display", "none");
                   },
                    type: "GET",
                    url: "testB.xml",
                    dataType: "xml",
                    success: function (xml) {
                        $("#titleArtist").append("<ul></ul>");
                        $(xml).find('CD').each(function () {
                            var cdTitle = $(this).find('TITLE').text();
                            var cdArtist = $(this).find('ARTIST').text();
                            $("<li></li>").html(cdTitle + ' , ' + cdArtist).appendTo("#titleArtist")
                        });
     ...