JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<div id="container-outer">
    <div id="container">
        
        <div class="second rounded">
            <p title="POS" class="tooltip" height="42" width="42">icon2</p>
        </div>
        <div class="third rounded"><p title="Bank" class="tooltip">icon3</p></div>
        <div class="fourth rounded"><p title="Purchase Management" class="tooltip">icon4</p></div>
       
        <div class="sixth rounded"><p title="Sales Management" class="tooltip">icon6</p></div>
         <div class="fifth rounded"><p title="NOMINAL" class="tooltip">Nominal icon5</p></div>
        <div class="seventh rounded"><p title="Stock" class="tooltip">icon7</p></div>
        <div class="eight rounded"><p title="Customers" class="tooltip">icon8</p></div>
        <div class="ninth rounded"><p title="Suppliers" class="tooltip">icon9</p></div>
        <div class="tenth rounded"><p title="Payroll & HR" class="tooltip">icon10</p></div>
       
       
    </div>
    <div id="container3">
        <div class="first rounded"><p>Profile Business Management System</p</div>  
    </div>
</div>

<div id="container2">
    <p class="i i1">info1 -POS</p>
    <p class="i i2">info2 - Bank</p>
    <p class="i i3">info3 - Purchase Management</p>
    <p class="i i4">info4 - Sales Management</p>
    <p class="i i5">info5 - NOMINAL</p>
    <p class="i i6">info6 - Stock</p>
    <p class="i i7">info7 - Customers</p>
    <p class="i i8">info8 - Suppliers</p>
    <p class="i i9">info9 -Payroll & HR</p>
</div>

CSS

#container{
    width:340px;
    height:auto;
    margin:10px;
    font-size:20px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    float:left;
}
#container2{
    width:600px;
    height:auto;    
    margin:10px;
    font-size:20px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    float:left;
}
#container3{
    width:220px;
    height:auto;
    font-size:20px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    float:right;
    margin-top:150px;
}
#container-outer{
    width:600px;
    height:100%;
    background:#eee;
    display:block;
    clear:both;
    margin:40px;
}
.i{
    margin:5px;
    padding:10px;
    background:#CED9DE;
    visibility:hidden;
}
.i:hover{
   background:#DCEDF5; 
}
.i1{
    visibility:hidden;
}
.rounded{
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
     border-radius: 10px; /* future proofing */
    -khtml-border-radius: 30px; /* for old Konqueror browsers */
        
    text-shadow: 1px 1px 1px #333;
}

.first{
  color:#fff;
  background:#62B7DE;
    width:190px;
    height:190px;
    font-size:30px;
    font-weight:bold;
    padding:20px;
    text-align:right;
}
.first:hover{
  color:#fff;
}
.second{
   background:#BAD656;
   width:60px;
   height:60px;
   margin:5px;
    float:left;
    padding:10px;
}
.second:hover{
  background:#7F962C;  
}
.second.tooltip:hover p{
  display:none; 
padding:2px 3px; 
margin-left:8px; 
width:130px;  
}
.second.tooltip{
 display:inline; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#6c6c6c;   
}
.third{
  background:#00AAFF;
  width:60px;
  height:60px;
  margin:5px;
    float:left;
     padding:10px;
}
.third:hover{
  background:#64B9E3;  
}
.fourth{
  background:#04557D;
  width:60px;
  height:60px;
  margin:5px;
  float:left;
  padding:10px;
  color:#fff;
}
.fourth:hover{
  background:#153C4F;  
}
.fifth{
  background:#0E7CB3;
  width:110px;
  height:110px;
 ...