JSFiddle - React, Tailwind, and code Playground

by Valeri Dage

HTML

<div id="mainframe">
    <p id="wtf"><abbr title="What The Fuck">WTF</abbr></p>
</div>
<div id="circle">
    <p class="inCircle"> Tool </p>
</div>

CSS

#mainframe {
    border:4px solid #FF9900;
    width:100px;
    height:50px;
    margin:auto;
    margin-top:100px;
    margin-right:40%;
    border-radius:5px;
    float:right;
}

#wtf {
    text-align:center;
}

#circle {
    border:3px dotted #FFFF00;
    width:100px;
    height:100px;
    border-radius:100%;
    float:left;
    display:inline;
}

.inCircle {
    text-align:center;
    margin-top:20px;
    font-size:40px;
}