JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<body>
<div id="wrapper">
    <div id="ingredients">
    	<h2>List of Ingredients</h2>
  		<form>
        	
   	  	<ul class="ingredients_list sortable">
        	<li>
            	<input class="list" type="textarea"/>
                <i> <img class="remove" src="images/remove.svg"> </i>
            </li>
        </ul>   
        <form>
            <p> Hit tab to create a new line. </p>
            </div>
            </div>

CSS

@charset "utf-8";
.ingredients_list {
	list-style: none;
}

.recipe_list {
	list-style: none;	
}

ul li {
	margin: 5px;
	
}

li i {
	float: right;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

.remove {
	height: 20px;
	width: 20px;	
}

#block {
	background-color:#099;
	width: 100px;
	height: 100px;
	transition: all 0.5s ease;	
}

.square {
	border-radius: 20px;	
}

.round {
	border-radius: 50px;	
}

JavaScript

$(document).ready(function() {

$(document).on('keydown','.list',function(key){
		if(key.which === 9) {
			$('.ingredients_list').append('<li><input class="list" type="text"/><i><img class="remove" src="images/remove.svg"></i></li>');
		
		}
	});	
	
	
	
	
	
	
	$('.sortable').sortable();

$(document).on('click', '.remove', function(){
		$(this).closest('li').fadeOut(500);
	});
});