JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://github.com/userguest08/guestrepo/tree/master/Derryck/src/main/webapp/resources"></script>
<link rel="stylesheet" href="https://github.com/userguest08/guestrepo/blob/master/Derryck/src/main/webapp/resources/css/divsenditplus2.css">
<link rel="stylesheet" href="https://github.com/userguest08/guestrepo/blob/master/Derryck/src/main/webapp/resources/css/downloadpagejsp.css">
<link rel="stylesheet" href="https://github.com/userguest08/guestrepo/blob/master/Derryck/src/main/webapp/resources/css/homeform1.css">
<link rel="stylesheet" href="https://github.com/userguest08/guestrepo/blob/master/Derryck/src/main/webapp/resources/css/homeform2.css">
<link rel="stylesheet" href="https://github.com/userguest08/guestrepo/blob/master/Derryck/src/main/webapp/resources/css/nolongeravailable.css">
<!DOCTYPE html>
<html>
<head>
    <link rel ="stylesheet" href = "/app/resources/css/homeform1.css" type="text/css"  />
    <link rel ="stylesheet" href = "/app/resources/css/homeform2.css" type="text/css"  />
    <link rel ="stylesheet" href = "/app/resources/css/divsenditplus2.css" type="text/css"  />
  	<link rel="shortcut icon" type="image/x-icon" href="/app/resources/512_copy.png">

    <title>SendIt</title>
    <script src="/resources/js/jquery.classyloader.js"></script>
    <script src="/resources/js/jquery.classyloader.min.js"></script>
    <script src="/resources/js/jszip.js"></script>
    <script src="/resources/js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="/resources/jsscripts/window_events.js"></script>
    <script type="text/javascript" src="/resources/jsscripts/chooseOptions&Link.js"></script>
    <script type="text/javascript" src="/resources/jsscripts/timers.js"></script>
    <script type="text/javascript" src="/resources/jsscripts/checkplus&verticalbutton.js"></script>
    <script type="text/javascript"...

CSS

@CHARSET "UTF-8";
/**************************style.css*******************************  */
#verticalbuttons
{
    color: #fff;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    position: absolute;
    left:-60px;
    top: 70px;
}

#form1{
	opacity: 100%;
	background-image: linear-gradient(-180deg, #FEFEFE 84%, #CACACA 100%);
	border-radius: 20px;
	position: absolute;
    left: 105px;
    top: 153px;
    width: 250px;
    height: 390px;
    
}
#fields{
background-image: linear-gradient(-180deg, #F5F5F5 0%, #FFFFFF 100%);
border: 1px solid #D1D2D3;
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.20);
border-radius: 20px;
}

#head{
background-image: linear-gradient(-180deg, #FEFEFE 84%, #CACACA 100%);
border-radius: 20px;
}
#get_file,#btn_add_re,#btn_add_send{
background-image: linear-gradient(-180deg, #F7F7F7 2%, #E2E3E4 100%);
border: 1px solid #D1D2D3;
border-radius: 60px;
text-decoration: none;
color: #46494D;
}

#btn_add_re,#btn_add_send{
position: relative;
left: 20px;
top: 1px;
}
#head_h2{
font-family: Museo-500;
font-size: 21px;
position: relative;
left: 50px;
top: 3px;
color: #46494D;
letter-spacing: -0.48px;
width: 146px;
height: 24px;
}
#namefile, #add-recipient ,#add_sender{
  border-radius: 50px;
  color: #5F401F;
  background: #D1D2D3;
}
ul {
    list-style:none;
    padding-left:20px;
}
li{
  margin: 0 0 3px 0;
}
.divider{
	background: #D1D2D3;
	width: 246px;
	height: 1px;
}

#message{
	resize:none;
	overflow: auto; 
	width: 237px;  
	height: 80px;
  	border-style: hidden;
}

#share_icon{
	width: 40px;
	height: 40px;
	background: url(share.png) ;
	border-radius: 100%;
  position: absolute;
  top: 335px;
  left: 10px;
}
#help_icon{
	width: 40px;
	height: 40px;
	background : url(help.png);
	border-radius: 100%;
  position: absolute;
  top: 335px;
  left: 200px;
	}
#transfert_btn, #transfert_link {
background-image: linear-gradient(-180deg, #F9F9F9 0%, #CDCECF...

JavaScript

/* check the ip adress of user */
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
var ipget = readCookie('ipadress'); 
var langget =readCookie('language');


/* remember the ip adress of user and changelanguage of app */
$.getJSON("http://jsonip.com?callback=?", function (data) {
	
	if(langget =="eng" || langget == null){
		setthewholeappin(english);
	}
	else if(langget =="fr"){
		setthewholeappin(french);
	}
	else if(langget =="ch"){
		setthewholeappin(chineese);
	}
	else if(langget =="es"){
		setthewholeappin(espagnol);
	}
	document.cookie = "ipadress="+data.ip+"";
	});

function setthewholeappin(language){
	alert(language);
	//here we change labes and names in specified language.
}

if ($('i#check_eng').is(':checked')) {
	document.cookie = "language=eng";
	window.location.reload();

}
else if ($('i#check_fr').is(':checked')) {
	document.cookie = "language=fr";
	window.location.reload();

}
else if ($('i#check_ch').is(':checked')) {
	document.cookie = "language=ch";
	window.location.reload();

}
else if ($('i#check_es').is(':checked')) {
	document.cookie = "language=es";
	window.location.reload();

}

function setlanguage(lang){
	alert(lang);
	if(lang =="eng"){
		document.cookie = "language=eng";
		window.location.reload();
	}
	else if(lang =="fr"){
		document.cookie = "language=fr";
		window.location.reload();
	}
	else if(lang =="ch"){
		document.cookie = "language=ch";
		window.location.reload();
	}
	else if(lang =="es"){
		document.cookie = "language=es";
		window.location.reload();
	}
}

function logintoplus(){

	$('#senditplus2').hide();
	$('#senditmenu2').hide();
	$('#senditplus').show();
	$('#senditmenu').show();

}

function...