JSFiddle - React, Tailwind, and code Playground

by diaryfakta

HTML

<div id='web'>
<b>Web</b>
<div id='about'>things</div>
</div>
<div id='beks'>dwadwa</div>

CSS

@font-face {
  font-family: 'Playball';
  font-style: normal;
  font-weight: 400;
  src: local('Playball'), local('Playball-Regular'), url('http://themes.googleusercontent.com/static/fonts/playball/v3/QS5qjU-Gc2sqWEq5kDfWQfesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}

#web{
font-family: 'Playball', cursive;
font-size:150px;
color:#000;
text-shadow:0 1px 1px #000;
border:solid 3px #7597A4;
outline:5px solid #5F7E89;
-moz-outline-radius:90%;
-webkit-outline-radius:90%;
-ms-outline-radius:90%;
-o-outline-radius:90%;
outline-radius:90%;
border-radius:90%;
height:250px;
width:250px;
padding:100px;
background:#5F7E89;
}
#web:before{
content:'Type';
font-size:120px;
position:absolute;
top:220px;
left:170px;
z-index:999;
}
#about{
z-index:999;
font-family: 'Playball', cursive;
font-size:30px;
color:#000;
text-shadow:0 1px 1px #000;
position:absolute;
top:100px;
left:70px;
}
#about:before{
content:'about';
position:absolute;
top:21px;
left:-27px;
z-index:999;
}
#beks{
position:absolute;
top:200px;
border-top:solid 3px #7597A4;
border-bottom:solid 3px #7597A4;
background:#5F7E89;
height:50px;
width:95%;
z-index:-999;
}