JSFiddle - React, Tailwind, and code Playground

Mobile phone icons

by Jennifer Perrin

HTML

<div class="mobile"></div>
<div class="mobile"></div>
<div class="mobile"></div>
<div class="mobile"></div>
<div class="mobile"></div>
<div class="mobile"></div>

CSS

body{
  width: 420px;
  padding: 60px;
  margin: 0 auto;
  background-color: #efefef;
}

.mobile:nth-child(1){
  background: #ffffff;
  height: 35px;
  width: 32px;
  border-top: 13px solid #000000;
  border-right: 10px solid #000000;
  border-bottom: 52px solid #000000;
  border-left: 10px solid #000000;  
  border-radius: 8px;
  position: absolute;
  margin: 0; 
}

.mobile:nth-child(1):before{
  background: #000000;
  content: "";
  width: 10px;
  height: 20px;
  position: absolute;
  top: -25px;
  right: -9px;
}

.mobile:nth-child(1):after{
  background: #ffffff;
  content: "";
  width: 8px;
  height: 7px;
  position: absolute;
  top: 46px;
  box-shadow: 
    0 12px 0 #ffffff,
    0 24px 0 #ffffff,
    12px 0 0 #ffffff,
    24px 0 0 #ffffff,
    12px 12px 0 #ffffff,
    24px 12px 0 #ffffff,
    12px 24px 0 #ffffff,
    24px 24px 0 #ffffff;
    
}

.mobile:nth-child(2){
  background: #fff;
  height: 45px;
  width: 32px;
  border-top: 13px solid #000000;
  border-right: 10px solid #000000;
  border-bottom: 42px solid #000000;
  border-left: 10px solid #000000;  
  border-radius: 8px;
  position: absolute;
  margin: 0 0 0 70px; 
}

.mobile:nth-child(2):before{
  background: #000000;
  content: "";
  width: 10px;
  height: 20px;
  position: absolute;
  top: -25px;
  right: -9px;
}

.mobile:nth-child(2):after{
  background: #ffffff;
  content: "";
  width: 8px;
  height: 7px;
  position: absolute;
  top: 56px;
  box-shadow: 
    0 12px 0 #ffffff,
    12px 0 0 #ffffff,
    24px 0 0 #ffffff,
    12px 12px 0 #ffffff,
    24px 12px 0 #ffffff;
    
}

.mobile:nth-child(3){
  background: #ffffff;
  height: 35px;
  width: 32px;
  border-top: 13px solid #000000;
  border-right: 10px solid #000000;
  border-bottom: 52px solid #000000;
  border-left: 10px solid #000000;  
  border-radius: 8px;
  position: absolute;
  margin: 0 0 0 140px; 
}

.mobile:nth-child(3):before{
  background: #000000;
  content: "";
  width: 10px;
  height: 20px;
  position: absolute;
  top: -25px;
 ...