JSFiddle - React, Tailwind, and code Playground

by rhumaric

HTML

<script src="http://fonts.googleapis.com/css?family=Peralta"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Peralta">
<h1>How nice have you been?</h1>
<ol class="gifts">
    <li class="gift"></li><!--
 --><li class="gift"></li>
</ol>
<div class="buttons">
    <button name="add-gift">Really nice!</button>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Peralta');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Peralta', cursive;
  line-height: 2;
  color: hsl(45,95%,75%);
  background: hsl(150, 90%, 30%);
  margin: 0;
  padding-top: 1em;
  text-align: center;
}

h1 {
  text-align: center;
  font-weight: normal;
  margin: 0;
  line-height: 1.5;
}

.gifts {
    text-align: left;
    margin: 0 auto;
    padding: .5em 1em 0;
    max-width: 234px;
    /* Quick fix for inline-block spacing. There's no text anyways */
    font-size: 0;
}

.gift {
    display: inline-block;
    /* Icon by Ruth Tsang: http://dribbble.com/shots/1337052-15-Christmas-Icons?list=searches */
    background-image: url("...

JavaScript

var container = document.querySelector('.gifts');
var firstElement = document.querySelector('.gift:nth-child(1)');
var button = document.querySelector('button');

button.addEventListener('click', function (event) {
    
    var gift = document.createElement('li');
    gift.classList.add('gift');
    gift.classList.add('added');
    
    console.log('Inserting new element');
    container.insertBefore(gift, firstElement.nextSibling);
});