JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group" id="edit" >
	<button id="editaccount" class="btn btn-default">Account
  <br>
	Email, password....
  </button>	
	<form onsubmit="return checkform();" id="formeditaccount" hidden>
	<div class="form-group">
	<label id="Channelname" data-i18n="Channelname" for="Channelname"> Channel name</label>
	<button type="button" class="btn btn-link pull-right" onclick="window.open('http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/email', '_blank')">sendit.com</button> 
	<input type="text" id="editchannel" class="form-control" pattern="[A-Za-z0-9]*">
		<label class="pull-right" style="text-align:right;">(Choose carefully, it can be set just one time)</label>


    </div>
    <div class="form-group">
    <label id="email" data-i18n="email" for="editemail"> Email</label>
    <input type="email" id="editemail" required="required" class="form-control">
    </div>
    <div class="form-group">
    <label id="New_pass" data-i18n="New_pass" for="editpass"> New password</label>
    <input type="password" id="editpass" required="required" class="form-control" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" title="Password is required and contains at least 1 (uppercase,lowercase,specialcharacters,digit) with 8 characters length">
    </div>
    <div class="form-group">
    <label id="confirmpass" data-i18n="confirmpass" for="confirmpass"> Confirm new password</label>
    <input type="password" id="confirmpass" required="required" class="form-control" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" title="Password is required and contains at least 1 (uppercase,lowercase,specialcharacters,digit) with 8 characters length">
    </div>
    <label id="confirmationpass" data-i18n="confirmationpass">...

CSS

.form-control{
  width:400px;
}
.form-group :not(#Billing,#edit, #Personalisation){
  position: relative;
  top: 100px;
  left: 100px;
}
button:focus{
   outline:0;
}
#editaccount {
    height: 70px;
    border-radius: 6px;
    padding: 20px 0;
    position: absolute;
    top:0px;
    
    width: 380px;
    text-align:left;
    font-size:15px;
}
#formeditaccount, #formbilingaccount, #formeditpersonalise{
  position:relative;
  left:400px;
  top:0px;
}
#billingaccount{
  
    height: 70px;
    border-radius: 6px;
    padding: 20px 0;
    position: absolute;
    top:90px;
    
    width: 380px;
    text-align:left;
    font-size:15px;

}
#formbilingaccount, #, #formeditpersonalise{
  position:relative;
  left:400px;
  top:0px;
}
#personalisationaccount{
	height: 70px;
    border-radius: 6px;
    padding: 20px 0;
    position: absolute;
    top:180px;
    width: 380px;
    text-align:left;
    font-size:15px;
}

.image-preview-input {
    position: relative;
	overflow: hidden;
	margin: 0px;    
    color: #333;
    background-color: #fff;
    border-color: #ccc;    
}
.input-group{
    width:350px;
    height:24px;
}
.image-preview-input input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
.image-preview-input-title {
    margin-left:2px;
}
#divimage {
    /**
     *    This below will center a background image and resize 
     *    to keep the element its a background centered and filled dynamically.    
     */
  background: url(http://placekitten.com/659/447) no-repeat center center; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    
    /**
     * below is borowed from Twitter Bootstrap hero-unit
     */
  padding: 60px; 
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  color: inherit;
  background-color: #eeeeee;
 ...

JavaScript

$(function(){
$('#editaccount').click();

$('#billingaccount').click(function(){
$('#formbilingaccount').show();
$('#formeditaccount').hide();
$('#formeditpersonalise').hide();
});

$('#editaccount').click(function(){
$('#formeditaccount').show();
$('#formbilingaccount').hide();
$('#formeditpersonalise').hide();
});
$('#personalisationaccount').click(function(){
$('#formeditaccount').hide();
$('#formbilingaccount').hide();
$('#formeditpersonalise').show();
});

});


$(function() {
    // Create the close button
    /*var closebtn = $('<button/>', {
        type:"button",
        text: 'x',
        id: 'close-preview',
        style: 'font-size: initial;',
    });
    closebtn.attr("class","close pull-right");*/
    // Set the popover default content
    /*$('.image-preview').popover({
        trigger:'manual',
        html:true,
        title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
        content: "There's no image",
        placement:'bottom'
    });*/
    // Clear event
    $('.image-preview-clear').click(function(){
        //$('.image-preview').attr("data-content","").popover('hide');
        $('.image-preview-filename').val("");
        $('.image-preview-clear').hide();
        $('.image-preview-input input:file').val("");
        $(".image-preview-input-title").text("Add your Walpaper"); 
        $('#divimage').removeAttr('background');
    }); 
    // Create the preview image
    $(".image-preview-input input:file").change(function (){     
        /*var img = $('<img/>', {
            id: 'dynamic',
            width:250,
            height:200
        });  */    
        
        var file = this.files[0];
        var reader = new FileReader();
        // Set preview image into the popover data-content
        reader.onload = function (e) {
            $(".image-preview-input-title").text("Change Walpaper");
            $(".image-preview-clear").show();
            $(".image-preview-filename").val(file.name);            
           ...