JSFiddle - React, Tailwind, and code Playground

by stackmanoz

HTML

<div class="coffee-cup">
<div class="cup"></div>
<div class="clip"></div>
<div class="clip-handle"></div>
    <div class="cup-curve"></div>
    <div class="logo">TJobs</div>
</div>

CSS

.cup
{
    height:70px;
    width:60px;
    top:5%;
    position:absolute;
    background:chocolate;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}
.clip
{
    height:50px;
    width:50px;
    background:chocolate;
    border-radius:100%;
    top:5%;
    position:absolute;
    left:8.5%;
}
.clip-handle
{
    height:30px;
    width:20px;
    background:white;
    position:absolute;
    top:8%;
    left:12.3%;
    border-top-right-radius:100%;
    border-bottom-right-radius:100%;
    border-top-left-radius:50%;
    border-bottom-left-radius:50%;
    z-index:100;
    
}
.cup-curve
{
    height:10px;
    width:50px;
    top:4%;
    
    left:2.5%;
    position:absolute;
    background:brown;
    border-bottom-right-radius:100%;
    border-bottom-left-radius:100%;
    
}
.logo
{
    color:brown;
    font-weight:bold;
    font-family:sans-serif;
    font-size:15px;
    left:2.8%;
    top:13%;
    position:absolute;
}