JSFiddle - React, Tailwind, and code Playground

by tjdragon

HTML

<body>
        <div>
            <p id="name"> </p><br/>
            <p id="title">GENERATE YOUR NAME</p>
            <img id="button" src="static/generator.png"/>
        </div>
    </body>

CSS

body {
/*border: 1px dashed white;*/
position:relative;
width: 960px;
margin: 0 auto;
padding: 0;
text-align:center;
background-image:url('static/background-soundproof.png');
background-repeat:no-repeat;
background-size:cover;
}

div {
/*border: 1px dashed blue;*/
text-align: center;
width:  400px;
height: 600px;
margin: auto;
}

#name {
color:black;
text-shadow:0 0 12px white;
text-transform:capitalize;
font-family: Impact, Sans-Serif;
font-weight:100;
font-size:2.5em;
margin: 0 auto;
position: relative;
top: 60px;
}

#title{
font-family:Courier, sans-serif;
font-size:1.5em;
color:#7D7DBD;
position: relative;
top: 400px;
}

img {
margin: auto;
position: relative;
top:150px;
}

p#name{
    display:inline-block;
    min-width: 150px;
    min-height: 150px;
    border: 1px solid black;
}