JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<div class="center pa" style="width: 750px;">
    <div class="ib">
        <img src="https://i1.dstatic.com/images/svg/384.png" />
    </div>
    <div class="ib" style="height: 250px; width: 320px; font-size: 18px; margin-left: 50px; color: #2E7D32;">
         <h1>POKEMON DELTA</h1>
        <p>Welcome to Pokemon Delta. After registration, you will be assigned your very own Pokemon and you can begin you journey to become the Pokemon Master</p>
        <button>Login</button>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    background: #F2F1EF;
}
td {
    padding: 30px;
}
p {
    line-height: 1.7em;
}
.pa {
    position: absolute;
}
.pr {
    position: realtive;
}
.ib {
    display: inline-block;
}
.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
button {
    color: #2E7D32;
    height: 50px;
    padding: 0 20px 0 20px;
    border: 5px solid #2E7D32;
    background: transparent;
    border-radius: 15px;
    font-weight: bold;
}