JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<div style='width:128px;height:128px;border:1px solid red;'><div class='np_computer'><div class='np_computerStand1'></div><div class='np_computerStand2'></div>
    </div></div>

CSS

.np_computer {
    position:relative;
    height : 90px;
    width  : 118px;
    background-color : black;   
    -webkit-border-radius:5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding : 5px 5px 10px 5px;
}
.np_computer:before {
    content:'';
    position:absolute;
    width : 92%;
    height : 75%;
    background-color: white;
}
.np_computer:after {
    content:'';
    position:absolute;
    top : 105%;
    left:  26%;
    width : 45%;
    height: 18%;
    background-color: black;
}
.np_computerStand1 {
    position:absolute;
    left: 20px;
    top : 105px;    
    width:25px;
    height:20px;
    border-radius: 20px;
    background-color: white;
    border : none;
    z-index : 9;
}
.np_computerStand2 {
    position:absolute;
    left: 78px;
    top : 105px;    
    width:25px;
    height:20px;
    border-radius: 20px;
    background-color: white;
    border : none;
    z-index : 9;
}

JavaScript

//TheNounProject - Computer by Amit Gharat