JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<div class='tags'>
    <ul>
        <li class='tag'>HTTP:80</li>
        <li class='tag-input'>
            <input type='text' />
        </li>
        <li class='tag'>HTTPS:443</li>
        <li class='tag-input'>
            <input type='text' />
        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
}

.tags:before, .tags:after {
  content: ' ';
  display: table;
}
.tags:after { clear: both; }


.tags input {
    font: inherit;
    border: 0 none;
    padding: 0 none;
    margin: 0;
    outline: none !important;
    width: 100%;
}

.tags {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

.tags li {
    display: block;
    float: left;
    line-height: 1em;
}
.tags .tag {
    margin: 1px 0;
    padding-left: .7em;
    padding-right: .7em;
    background: #ccc;
    padding: 5px;
}
.tag-input {
    width: 10px;
}
.tag-input input {
    padding: 5px 3px;
}

JavaScript

var index = null;

var elements = []

$(document).on('keydown', function(e) {
    console.log(e.which, e.shiftKey, e);
});