JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div>
    <p>Dashboard    </p>
    <p class="circle"></p>
    <p class="circle one"></p>
    <p class="circle two"></p>
    <p class="circle three"></p>    
        
    <ul>
        <li></li>
    </ul>  
            
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);
body {
    font-family: 'Yanone Kaffeesatz', sans-serif;
}
.one {
    background-color: #262d40;
}

.two {
    background-color: #4791d2;
}

.three {
    background-color: #00c5b1;
}

.four {
    background-color: #02baff;
}


div {
    background-color: rgba(70, 85, 104, 0.9);
    width: 100%;
    height: 500px;    
    margin: 0;
    top: 0px;
    position: absolute;
    
}

p {
    margin: 20px;
    color: white;
    font-size: 28px;
    float: left;
}
 .circle {
     border-radius: 50%;
	width: 120px;
	height: 120px; 
    border: 6px solid #ff6861;
 }