JSFiddle - React, Tailwind, and code Playground

by rionmonster

HTML

<input id='enterTag' /> <input id='click' type='button' value='make a tag' />
<br />
<br />
<div id='tags'>
</div>

CSS

#tags
{
     height: 30px;  
}

.tag
{
    
    max-width: 200px;
    height: 20px;

    float: left;

    background: #E0EAF1;
    color: #3E6D8E;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
}

.tag:hover
{
     background-color: #3E6D8E;
    color: #E0EAF1;
    border-bottom: 1px solid #37607D;
    border-right: 1px solid #37607D;

}

.delete
{
     margin-left: 10px;
     height: 20px;
     width: 20px;
     float: right;
     background:  #3E6D8E; 
}

JavaScript

$('#click').click(function()
{
     $('#tags').append("<div class='tag'>" + $('#enterTag').val() + "<img class='delete'/></div>");                      
});