JSFiddle - React, Tailwind, and code Playground

by Lindow

HTML

<div class="sde-container">
  <div class="sde">
    <div class="sde-color" style="background:#333333;">
      <input type="text" placeholder="ex: #333333">
      <button class="remove">x</button>
    </div>
    <div class="sde-color" style="background:#4dadc9;">
      <input type="text" placeholder="ex: #4dadc9">
      <button class="remove">x</button>
    </div>
  </div>
</div>

<br>

<div class="atv">
  <label>
    <div class="atv-color">
      <input type="radio" name="atv-color" value="blue">
      <img src="https://99designs-start-assets.imgix.net/images/brief-colors/blue-ddc0e5cf.png?auto=format&ch=Width%2CDPR" style="width:100%;">
    </div>
  </label>
  <label>
    <div class="atv-color">
      <input type="radio" name="atv-color" value="aqua">
      <img src="https://99designs-start-assets.imgix.net/images/brief-colors/aqua-2ad270cb.png?auto=format&ch=Width%2CDPR" style="width:100%;">
    </div>
  </label>
  <label>
    <div class="atv-color">
      <input type="radio" name="atv-color" value="green">
      <img src="https://99designs-start-assets.imgix.net/images/brief-colors/green-24a49099.png?auto=format&ch=Width%2CDPR" style="width:100%;">
    </div>
  </label>
  <label>
    <div class="atv-color">
      <input type="radio" name="atv-color" value="violet">
      <img src="https://99designs-start-assets.imgix.net/images/brief-colors/purple-e7723e2e.png?auto=format&ch=Width%2CDPR" style="width:100%;">
    </div>
  </label>
  <label>
    <div class="atv-color">
      <input type="radio" name="atv-color" value="rose">
      <img src="https://99designs-start-assets.imgix.net/images/brief-colors/pink-01853e5c.png?auto=format&ch=Width%2CDPR" style="width:100%;">
    </div>
  </label>
  <label>
    <div class="atv-color">
      <input type="radio" name="atv-color" value="red">
      <img src="https://99designs-start-assets.imgix.net/images/brief-colors/red-d750f2a1.png?auto=format&ch=Width%2CDPR" style="width:100%;">
    </div>
  </label>
  <label>
    <div...

CSS

.sde input::-webkit-input-placeholder {color:#eaeaea;}
.sde input::-moz-placeholder          {color:#eaeaea;}
.sde input:-moz-placeholder           {color:#eaeaea;}
.sde input:-ms-input-placeholder      {color:#eaeaea;}

.sde input {
  background: rgba(51, 52, 51, 0.3);
  border: none;
  bottom: 0px;
  position: absolute;
  left: 0px;
  padding: 5px 8px;
  color: white;
}

.sde-color,
.sde-color-plus {
  vertical-align: top;
  margin: 5px;
  height: 200px;
  width: 200px;
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.sde-color:hover {
  transform:scale(1.05);
}

.atv-color {
  margin: 5px;
  display: none;
  width: 50.45px;
  cursor: pointer;
}

.atv-color input {
  display: none;
}

.remove {
  color: white;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 4px 8px;
  border: none;
  background: rgba(51, 51, 51, 0.3);
}

.sde-color-plus {
  border: 1px solid #cccccc;
}

.sde-color-plus span {
  position: absolute;
  font-size: 70px;
  color: #cccccc;
  left: 0;
  right: 0;
  text-align: center;
  top: 30%;
}

JavaScript

var sde;
$(".sde .sde-color:first-child .remove").remove();

function sdePlus() {
  if ($('.sde > .sde-color').length < 3) {
    if ($('.sde-color-plus').length < 1) {
      var sdeplus = document.createElement("div");
      sdeplus.className = "sde-color-plus";
      sdeplus.innerHTML = "<span>+</span>"
      $('.sde').append(sdeplus);
    }
  }
}
sdePlus();

function scaleClick() {
  $('.sde-color').css({
    'transform': 'scale(1)',
  });
  
  sde.css({
    'transform': 'scale(1.05)',
  });
  
  sde.find('input').css({
    'transform': 'scale(1)',
  });
}

$(document).on('click', '.sde-color-plus', function(element) {
  $(this).remove();

  var div = document.createElement("div");
  div.className = "sde-color";
  div.style = "background:#fafafa;"
  div.innerHTML = '<input type="text" placeholder="ex: #fafafa"><button class="remove">x</button>';

  sde = $(div);
  $('.sde').append(div);
	scaleClick();
  sdePlus();

  $(".atv-color").css({
    'display': 'inline-block',
  });
});

$(document).on('click', '.sde-color, .sde-color input', function(element) {
  sde = $(this);
	scaleClick();
  sdePlus();
  
  $(".atv-color").css({
    'display': 'inline-block',
  });
});

$(document).on('select', '.sde-color', function(element) {
  sde = $(this);
	scaleClick();
  sdePlus();
  
  $(".atv-color").css({
    'display': 'inline-block',
  });
});

$(document).on('click', '.remove', function(e) {
  sde = $(this);
  sde.parent().remove();
  $(".sde .sde-color:first-child .remove").remove();
  sdePlus();
});

$('input[type=radio]').on('change', function(e) {
  sde.find('input').val(e.target.value);
  var img = $(this).siblings("img").attr("src");

  sde.css({
    'background-image': 'url(' + img + ')',
    'background-position': 'center',
    'background-size': 'cover',
  });
});

$(document).on('keyup', ".sde-color input", function(element){
  sde.val(element.target.value);
  
  sde.css({
    'background-image': 'none',
    'background-position': 'center',
   ...