JSFiddle - React, Tailwind, and code Playground

by queryj

HTML

<a href="#">
  Checkout
</a>
<img src="http://i.imgur.com/gnZnY.png" />

CSS

/*
    
    INSTRUCTIONS

    Using CSS properties alone, recreate this button: 

        http://i.imgur.com/gnZnY.png. 

    Spend no longer than 15 minutes on it, we don't 
    expect it to be a perfect match. It's open book, 
    feel free to hit Google but be prepared to 
    explain your solution.

*/
 div.hola {
    height: 3em;
}
a {
    border: solid gray 1px;
    padding: 1em 1em 1em;
    border-radius: 18px;
    font-family: Arial;
    font-weight: bold;
    font-size: 2em;
    text-decoration: none;
    color: #010;
    text-transform: uppercase;
    background:linear-gradient(lightgray, #001122, lightgray);
}
a::before {
    content:"★";
    color: gray;
}
a::after {
    content:"★";
    color: gray;
}
#div1 {
    height: 3em;
    width: 10px;
}
#div2 {
    height: 4em;
    width: 20em;
    padding: 2em 0.5em 1em;
    border: solid black 2px;
    border-radius: 18px;
    background-color: gray;
}

JavaScript

var div = document.createElement("div");
div.setAttribute("id", "div1");
var c = document.getElementsByTagName("a")[0];
document.body.insertBefore(div, c);

var div2 = document.createElement("div");
div2.setAttribute("id", "div2");
div2.appendChild(c);
document.body.appendChild(div2);