JSFiddle - React, Tailwind, and code Playground

by levan gongadze

HTML

<div class="formGenerator">
      <div class="left">
        <ul class="formList">
          <li class="question"><i></i>Question</li>
          <li class="heading"><i></i>Heading</li>
          <li class="video"><i></i>Video</li>
          <li class="image"><i></i>Image</li>
        </ul>
      </div><!--/left-->
      <div class="generated"></div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font: 14px 'arial';
}

body {
  background: #356aa0;
  background: -moz-linear-gradient(top,  #356aa0 0%, #356aa0 100%);
  background: -webkit-linear-gradient(top,  #356aa0 0%,#356aa0 100%);
  background: linear-gradient(to bottom,  #356aa0 0%,#356aa0 100%);
}

input {
  border: none;
  outline: none;
  padding: 10px;
  font-size: 17px;
}

.formGenerator {
  padding: 2%;
  width: 1300px;
  margin: 2% auto;
  background: #fff;
  overflow: hidden;
  border-radius: 20px;
}

.formList {
  overflow: hidden;
  border-radius: 10px;
  background: #f0f0f0;
}

.left {
  width: 20%;
  float: left;
}

.formList li {
  color: #4a4a4a;
  cursor: pointer;
  font-size: 17px;
  overflow: hidden;
  line-height: 30px;
  padding: 10px 20px;
  border-bottom: 1px solid #ccc;
}

.formList li i {
  float: left;
  padding: 15px;
  margin-right: 20px;
  -webkit-mask-size: cover;
  background-color: #1a173e;
}

.generated {
  float: right;
  width: 77%;
}

.generatedList {
  float: right;
}

.generatedList li ul {
  position: absolute;
  background: #fff;
  width: 200px;
  display: none;
  border: 1px solid #e9e9e9;
  margin: 10px 0 0 -96px;
}

.generatedList li {
  padding: 10px;
  color: #4a4a4a;
  cursor: pointer;
  font-size: 15px;
  text-align: center;
  background: #eeeeee;
  text-align: left;
}

.generatedList li ul li i {
  padding: 10px;
  float: left;
  margin-right: 20px;
  -webkit-mask-size: cover;
  background-color: #1a173e;
}

.generatedList li ul li {
  background: none;
}

.generatedList li ul li:hover {
  background: #eeeeee;
}

.generateQuestion {
  overflow: hidden;
  padding: 20px;
  display: block;
  border-bottom: 1px solid #e9e9e9;
}

.headingInput:focus {
  border-bottom: 1px solid #000;
}

.headingInput {
  width: 50%;
  transition: 1s;
  border-bottom: 1px solid #ccc;
}

.question i {
  -webkit-mask: url('question-list.svg') no-repeat;
}

.heading i {
  -webkit-mask: url('lowercase-interface-symbol.svg')...

JavaScript

num = 0;
$('.question').click(function() {
  id = num++;
  $('.generated').append(
    '<div class="generateQuestion">' +
    '<ul class="generatedList">' +
    '<li class="choose" data-id="'+id+'">Select Method' +
      '<ul data-id="'+id+'">' +
      '<li data-id="'+id+'" class="value"><i></i>Short Answer</li>' +
      '<li data-id="'+id+'" class="textarea"><i></i>Long Answer</li>' +
      '<li data-id="'+id+'" class="checkbox"><i></i>Multiple Choice</li>' +
      '<li data-id="'+id+'" class="radio"><i></i>Radio Buttons</li>' +
      '<li data-id="'+id+'" class="select"><i></i>Select</li>' +
      '<li data-id="'+id+'" class="link"><i></i>Links</li>' +
      '<li data-id="'+id+'" class="date"><i></i>Date</li>' +
      '<li data-id="'+id+'" class="time"><i></i>Time</li>' +
      '</ul>' +
    '</li>' +
    '</ul>' +
    '<input class="headingInput" type="text" name="" placeholder="Question"><div class="genapp" data-id="'+id+'"></div><div class="required" data-id="'+id+'">Required</div></div>');
});

// $('.heading').click(function() {
//   $('.generated').append('<div class="generateQuestion"><input class="headingInput" type="text" name="" placeholder="Question"></div>');
// });

$('.generated').on('click', '.generatedList .value', function(){
  id = $(this).data('id');
  $('.genapp[data-id='+id+']').html('<input data-id='+id+' type="text" name="" placeholder="Short Answer">');
});

$('.generated').on('click', '.generatedList .textarea', function(){
  id = $(this).data('id');
  $('.genapp[data-id='+id+']').html('<textarea type="text" name="" placeholder="Long Answer"></textarea>');
});

$('.generated').on('click', '.generatedList .checkbox', function(){
  id = $(this).data('id');
  $('.genapp[data-id='+id+']').html('<label><input type="checkbox" name="">Option 1</label><div>add</div>');
});

$('.generated').on('click', '.generatedList .radio', function(){
  id = $(this).data('id');
  $('.genapp[data-id='+id+']').html('<label><input type="radio" name="">Radio...