JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="container">
    <div class="box1">text</div>    
    <div class="box1">text</div>  
    <div class="box1">text</div>  
    <div class="box1">text</div>  
</div>

CSS

.container{
    
    width:80%;
    height:500px;
    margin:0 auto;
    background:orange;
    padding:10px;
}
.box1{
   width:100px;
    height:100px;
    background:darkgreen;
    border:1px solid rgba(0,0,0,0.9);
    margin:15px 10px;
    -webkit-transition:all 1s ease-in-out;
   transition:all 1s ease-in-out;
    display:inline-block;
    text-align:center;color:#fff;
    vertical-align:middle;
}
.box1:hover{
     border:1px solid rgba(0,0,0,0.1);
      transform: scale(1.1);
   
}