JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<div class='np_outer'>
    <div class='np_frontcamera'></div>  
    <div class='np_led'></div> 
    <div class='np_inner'></div>
    <div class='np_trackball'></div>  
</div>

CSS

div.np_outer {
    height : 55px;
    width  : 35px;
    background-color : black;   
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding : 15px 3px 15px 3px;
    text-align: center;
}
div.np_inner { 
    background-color : white; 
    width : 100%;
    height : 100%;
}
div.np_trackball {
    background-color : white;
    width : 7px;
    height : 7px;
    margin: 4px auto 0 auto;
    border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    -khtml-border-radius:50px;       
}
div.np_frontcamera { 
    float:left;
    background-color : white;
    width : 4px;
    height: 4px;
    margin: -8px auto 0 20%;
    border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    -khtml-border-radius:50px;    
}
div.np_led {
    float:left;
    background-color : white;
    width : 40%;
    height : 3px;
    margin: -8px auto 0 40%;
    border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    -khtml-border-radius:50px; 
}

JavaScript

//TheNounProject - iPhone by Amit Gharat