JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div id="container" class="vcenter logo">
    <h1>Hello CSS!</h1>
    <div id="div2">Hello CSS!</div>
    <div id="div1" class="center">
        <p>Hello CSS!</p>
        <p>Hello CSS!</p>
    </div>
</div>

CSS

div{
    border: 1px solid;
}
#container {
    width: 300px;    
    text-align: center;
}
#div2{
    width: 200px;
    margin: 10px;
}
#div1 {
    background: red;
    width: 100px;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.vcenter {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

.logo{
    background-image: url('http://amicliens.com/images/Amicliens_Logo.PNG');
    background-size: contain;
    background-repeat: no-repeat;
    /*background-attachment: local;*/
    background-position: 10% 80%;
}