JSFiddle - React, Tailwind, and code Playground

by Tilwin Joy

HTML

<div id="iconWrapper">
    <div class="icon">
        
        <div class="explanation boxGreen">
            <img src="img/icon3.png" />
             <h2 class="green">IT Support</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
        </div>
    </div>
    <div class="icon">
        
        <div class="explanation boxOrange">
            <img src="img/icon1.png" />
             <h2 class="orange">Communications</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
        </div>
    </div>
    <div class="icon">
       
        <div class="explanation boxBeige">
             <img src="img/icon2.png" />
             <h2 class="beige">Cloud Solutions</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
}
#iconWrapper {
    display:flex;
    margin-top:50px;
}
.icon {
    display:flex;
    width:33.3%;
    text-align:center;
}
.icon::after{
    clear:both;
}
.explanation {
    text-align:left;
    width:90%;
    min-height: 200px;
    margin: 0 auto;
    margin-top:40px;
    border-radius:10px;
    padding:20px;
    margin:20px;
}
.boxOrange {
    border:2px solid RGBa(213, 99, 42, .4);
}
.boxBeige {
    border:2px solid RGBa(211, 200, 175, .4);
}
.boxGreen {
    border:2px solid RGBa(137, 176, 185, .4);
}