JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

HTML

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

CSS

.aboutboxes1 {
    min-width:100%;
    max-width:100%;
}
.aboutbox1 {
    max-width:20%;
    min-width:20%;
    height:10vw;
    float:left;
}
.aboutbox {
    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;
}
#image1 {
  border: hidden;
}
.aboutbox2 {
    max-width:20%;
    min-width:20%;
    height:10vw;
    float: left;
}
#image2 {
    border: 25px solid #000000;
}
.aboutbox3 {
    max-width:20%;
    min-width:20%;
    height:10vw;
    float:right;
}
#image3 {
    border: hidden;
}