JSFiddle - React, Tailwind, and code Playground

by David McCormack

HTML

<div class="aboutcol1">
           
                <div class="aboutbox1">
      <div id="aboutbox-image1">
      
                        </div>
                        </div>
               
    
                 <div class="aboutbox2">
      <div id="aboutbox-image2">
                           
                        </div>
            </div>
                <div class="aboutbox3">
      <div id="aboutbox-image3">
      </div>
                        </div>
    
    </div>

CSS

.aboutboxes1 {
  min-width:100%;
  max-width:100%;
}     
       
.aboutbox1{
  max-width:20%;
  min-width:20%;
  height:10vw;
  float:left;
}


#aboutbox-image1 {
 
    background-image: url('http://placehold.it/350x150');
    background-position: left top;
    background-size: 100%;
    background-repeat:no-repeat;
    cursor: pointer;
    margin-left:auto;
    margin-right:auto;
    height: 100%;   
    border-radius: 1.8vw;
    border: hidden;
    
}

.aboutbox2{
   max-width:20%;
  min-width:20%;
  height:10vw;
  
}

#aboutbox-image2 {
   
     background-image: url('http://placehold.it/350x150');
    background-position: left top;
    background-size: 100%;
    background-repeat:no-repeat;
    cursor: pointer;
    margin-left:auto;
    margin-right:auto;
    height: 100%;   
    border-radius: 1.8vw;
    border: 25px solid #000000;
    
}
.aboutbox3{
    max-width:20%;
  min-width:20%;
  height:10vw;
  float:right;

}


#aboutbox-image3 {
   
     background-image: url('http://placehold.it/350x150');
    background-position: left top;
    background-size: 100%;
    background-repeat:no-repeat;
    cursor: pointer;
    margin-left:auto;
    margin-right:auto;
    height: 100%;   
    border-radius: 1.8vw;
    border: hidden;
    
}