JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.js"></script>

 	 
 <body>

	<form id="form1" >

		<div id="verticalbuttons" >
		<input type="button" id="senditbutton" class="btn btn-primary btn-xs" value="SendIt"  onclick="senditbuttonfunc()">
		<input type="button" id="plusbutton" class="btn btn-primary btn-xs" value="Plus" onclick="plusbuttonfunc()">
		</div>
		<div id="files">
		<h2 id="head_h2" class="text-primary" data-i18n="head_h2">Send up to 2GB</h2>
		<h2 id="head_h22" class="text-primary" data-i18n="head_h22" hidden=true;>Send up to 20GB</h2>
		<div id="selected_files" style="overflow: auto; height: 40px;">
		
		<ul id="li_file">
		<li hidden="true"><input id="inputfile" type="file" multiple="multiple"></li>
		<!-- <li><a href="javascript:;" id="browse">+ Add File </a></li> -->
	    <li><input type="button" class="btn btn-default" id="get_file" value="+ Add File(s)" data-i18n="[value]get_file" onclick="javascript:add_file()"></li>

 		</ul>
 		</div>
		</div>
		<hr class="divider">
		
		<!-- <canvas class="loader"></canvas>  -->
		<div id="recipients">
		<div id="selected_recipients" style="overflow: auto; height: 40px;">
		<ul id="li_rec" >
		<li hidden="true"><input  id="add-recipient" type="text"></li>
		</ul>
		<a href="javascript:add_email_recipients()" id="btn_add_re" class="btn btn-default" data-i18n="btn_add_re">+ add recipient(s)</a>
		</div>
		</div>
		<hr class="divider">
		
		<div id="sender">
		<ul id="li_sen">
		<li hidden="true"><input id="add_sender"...

CSS

#senditplus, #senditplus2{
background: #F4F4F4;
border: 1px solid #D1D2D3;
border-radius: 20px;
opacity: 100%;
width: 490px;
height: 410px;
position: absolute;
left: 180px;
top :0px;
}
#senditpluslabel1{
height: 24px;
position: absolute;
top: 5%;
left: 5%;
font-size:20px;
}

#senditpluslabel2{
position:absolute;
top:15%;
left:5%;
height: 18px;
font-size:17px;
}
.carousel-inner{
border: 1px solid #D1D2D3;
border-radius: 20px;
opacity: 100%;
width: 370px;
height: 280px;
position: absolute;
left: 40px;
top :70px;
margin: none;
padding:none;
}
.carousel-inner > .item > img {
	border-radius: 20px;
      margin: none;
	  border:none;
	  height:280px;
      width: 370px;
      padding:none;
}


/*.img {
border-radius: 20px;
width: 100%;
}*/
/*#senditplus2sliders{
position: relative;
left: 20px;
top :320px;
}*/
.carousel-indicators{
position :absolute;
padding-bottom:10%;
}
#senditplus2button{
	outline:0;
  
  border-radius: 40px;
  width: 75px;  height: 40px;
}
#button_transfers_plus, #button_contatcs_plus, #button_account_plus, #button_info_plus{
  background-color:none;
  border-radius:40px;
}
#button_transfers_plus:focus, #button_contatcs_plus:focus, #button_account_plus:focus, #button_info_plus:focus
{
  background-color:#4968a3;
  
}
.btn-primary-spacing 
{
margin-right: 60px;
}
.full-width {
  text-align: left;
  height: 50px;
  display:block;
  font-size: 24px;
}
.pull-left{
  border-radius:40px;
}
.color-blue {color: #0080c5;}
#form2, #fulldivform2_plus{
background: #FFFFFF;
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.20);
opacity: 100%;
border-radius : 20px;
width: 672px;
height: 410px;
position: relative;
top: 145px;
left: 520px;
}



#senditplusinput1{
position: relative;
top: 100px;
left: 5%;
width: 276px;
padding:none;
}

#senditplusinput2{
width: 276px;
position: relative;
top: 130px;
left: 5%;
padding:none;
}

#senditplushref{
position: absolute;
top: 200px;
left: 320px;
padding:none;
}

#senditpluscheckbox{
position: relative;
top: 130px;
left:...

JavaScript

$("#choose_expire").popover({
	        html: true
	    }).on('shown.bs.popover', function () {
	        $('#date_end').datetimepicker({
          defaultDate: new Date(),
          minDate:new Date(),
          showTodayButton:true,
          showClose:true
          });
          $('#save-setting').click(function(){
		   expiredate=$('#choose_expire_date').val();
		   passwordchosen = $('#password_plus').val();
       alert(expiredate+"\n"+ passwordchosen)
		   $('#choose_expire').popover('hide');
          });
      });